使用javascript更改div内的svg填充

Question

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

问题是我想不通是：

1. 是否可以将图像加载到 .svg 中并在 JS 代码中填充？
2。如果有办法用我在这个例子中做的更短的代码来加载 .svg 图像？

P.S：在sn-p中我已经展示了我愿意实现的结果，除了图像颜色变化的过渡效果。

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"
	 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>

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>