Question

我正在尝试创建一个带有动画效果的div（按钮），当用户将鼠标悬停在div上时，div内的图像会更改颜色。

问题是我无法弄清楚：
是否可以将图像加载到.svg并填充JS代码？<登记/> 2。如果有一种方法加载.svg图像的方式更短，我在这个例子中做了吗？

P.S：在片段中，我展示了我愿意实现的结果，除了对图像颜色变化的过渡效果。

＆＃13;

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');
}

＆＃13;

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;
}

＆＃13;

<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"
	 width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
	<g id="star">
		<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 
			0.5,38.833 27.502,62.232 19.409,97.025 		"/>
	</g>
</g>
</svg>

＆＃13;

Answer 1

请注意，SVG不在div中，因此悬停仅适用于div内容。我也转移到jQuery 3，以便addClass与SVG元素一起使用。我已经删除了你在SVG中放置的大量不必要的代码。

function changeMe() {
  var block = document.getElementById('block');
  block.src = ('http://s8.postimg.org/q8p6g28cx/image.png');
  $('#text').addClass('light-blue-link');
  $('polygon').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');
  $('polygon').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);
  fill: 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://code.jquery.com/jquery-3.0.0-alpha1.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>

<svg id="Слой_1" width="100px" height="100px" viewBox="0 0 100 100">
<g>
	<g id="star" fill="#3C3B3C">
		<polygon 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 
			0.5,38.833 27.502,62.232 19.409,97.025"/>
	</g>
</g>
</svg>

Answer 2

function changeMe() {
  var block=document.getElementById('block');
  block.src=('http://s8.postimg.org/q8p6g28cx/image.png');
  $('#text').addClass('light-blue-link');
 $('polygon').css('fill','rgb(88, 202, 230)')
}

function changeMeBack() {
  var block=document.getElementById('block');
  block.src=('http://s8.postimg.org/e5f9er7wx/image.png');
  $('#text').removeClass('light-blue-link');
  $('polygon').css('fill','#3C3B3C')
}

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>
<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>


        <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" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
    <g>
      <g id="star">
        <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 
			0.5,38.833 27.502,62.232 19.409,97.025 		" />
      </g>
    </g>
  </svg>

使用javascript更改div中的svg填充

2 个答案: