У меня есть icon.svg спрайт. Ему принадлежат две иконки #rect и #circle. Вот оно:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<style>:root>svg{display:none}:root>svg:target{display:block}</style>
<svg id="rect" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" >
<rect fill="#00ff00" stroke-width="2" stroke="#000000" x="2px" y="2px" width="14px" height="14px" />
</svg>
<svg id="circle" x="0px" y="0px" width="18" height="18" viewBox="0 0 18 18">
<circle fill="#ff0000" stroke-width="2" stroke="#000000" cx="9px" cy="9px" r="5px" />
</svg>
</svg>
Я использую спрайт в качестве фонового изображения и выбираю значок цели по id. Ниже приведен пример.
<!DOCTYPE HTML>
<html>
<head>
<script>
function OnClick() {
var div_el = document.getElementById("div_icon");
switch (div_el.className) {
case "rect icon": div_el.className = "circle icon"; break;
case "circle icon": div_el.className = "rect icon"; break;
default: div_el.className = "rect icon"; break;
}
}
</script>
<style>
.rect { background: url(icon.svg#rect) no-repeat scroll 0 50% transparent }
.circle { background: url(icon.svg#circle) no-repeat scroll 0 50% transparent }
.icon { width: 18px; height: 18px; float: left; }
</style>
</head>
<body>
<div><input type="button" value="Change icon" onclick="OnClick()"></div>
<div id="div_icon" class="rect icon"> </div><span>image Stack</span>
</body>
</html>
Значок не изменяется при нажатии кнопки в Goggle Chrome.
ПРИМЕЧАНИЕ: Воспроизводится только протокол HTTP.