我想创建一个带有动画效果的div(按钮),当用户将鼠标悬停在div上时,div内的图像将改变颜色。
问题是,我不明白是:
1.是否有可能保持图像加载.svg和填充JS代码?
2.如果有一种方法来加载.svg图像的方式更短的代码,我在这个例子中呢?
P.S:在片段中,我展示了我愿意实现的结果,除了图像颜色变化的过渡效果。用JavaScript改变svg填充内div
function changeMe() {
var block = document.getElementById('block');
block.src = ('http://s8.postimg.org/q8p6g28cx/image.png');
$('#text').addClass('light-blue-link');
}
function changeMeBack() {
var block = document.getElementById('block');
block.src = ('http://s8.postimg.org/e5f9er7wx/image.png');
$('#text').removeClass('light-blue-link');
}
span {
padding-left: 5px;
vertical-align: middle;
font-weight: 300;
transition: color 1s ease;
}
.light-blue-link {
color: rgb(88, 202, 230);
}
.image {
height: 16px;
vertical-align: middle;
}
.button {
height: 30px;
width: auto;
cursor: pointer;
z-index: 1;
}
.button::before {
display:inline-block;
content:'';
height: 100%;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='bookmark' class='button' onmouseover="changeMe()" onmouseout="changeMeBack()">
<img id='block' class='image' src="http://s8.postimg.org/e5f9er7wx/image.png">
<span id='text' class=''>Bookmarks</span>
</div>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
\t width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
\t <g id="star">
\t \t <polygon fill="#3C3B3C" points="50,78.576 80.591,97.025 72.498,62.232 99.5,38.833 63.905,35.779 50,2.975 36.096,35.779
\t \t \t 0.5,38.833 27.502,62.232 19.409,97.025 \t \t "/>
\t </g>
</g>
</svg>
究竟是什么你想怎么办?你的第一点是不清楚的,第二点是没有的 - 当你需要定义形状的所有点时,没有办法缩短你所拥有的。虽然你可以摆脱HTML中间的(非常奇怪的)XML声明。 –