Изменить svg заполнить в div с помощью javascript

Question

Я пытаюсь создать div (кнопку) с эффектом анимации, когда пользователь наводит на div пробел и изображение внутри div меняют цвет.

Проблема в том, что я не могу понять:

1. Можно ли сохранить изображения, загруженные в .svg, и заполнить код JS?
2. И если есть способ загрузить изображения .svg с более коротким кодом, который я сделал в этом примере?

P.S: В отпечатке я показал результат, который я желаю достичь, кроме эффекта перехода на изменение цвета изображения.

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>

Answer 1

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 
 
\t \t \t 0.5,38.833 27.502,62.232 19.409,97.025 \t \t " /> 
 
     </g> 
 
    </g> 
 
    </svg>

Answer 2

Обратите внимание на SVG не в 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> 
 
\t <g id="star" fill="#3C3B3C"> 
 
\t \t <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 
 
\t \t \t 0.5,38.833 27.502,62.232 19.409,97.025"/> 
 
\t </g> 
 
</g> 
 
</svg>