<html>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
<div><svg xmlns:svg='http://www.w3.org/2000/svg'xmlns='http://www.w3.org/2000/svg'version='1.1' viewBox='0 0 300 200'> <rect id='play' class='bar' x='20' y='60' width='80' height='120'><set attributeName='fill' to='#ec008c' begin='play.mouseover' end='play.mouseout'></set></rect></svg>
</div>
</body>
</html>
<style>
.box1{
height: 400px;
width: 400px;
border: 1px solid #222;
}
.box2{
height: 400px;
width: 400px;
border: 1px solid #222;
background: url("data:image/svg+xml;utf8,<svg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 300 200'><rect id='play' class='bar' x='20' y='60' width='80' height='120'><set attributeName='fill' to='#ec008c' begin='play.mouseover' end='play.mouseout'></set></rect></svg>");
}
</style>
<script>
var bg = "url(\"data:image/svg+xml;utf8,<svg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 300 200'> <rect id='play' class='bar' x='20' y='60' width='80' height='120'> <set attributeName='fill' to='#ec008c' begin='play.mouseover' end='play.mouseout'></set></rect></svg>\")";
$('.box1').css('background-image', bg );
</script>
Svg hover незапланирован, но при svg backroun hover не работает. Как я могу изменить настройки SVG фона в Jquery?(Изменение фона сообщения Box1) (извините, Google Traslate)