Question

我有 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协议。

在Google Chrome浏览器中更改样式时，精灵中的图标不会更改

0 个答案: