SVG Sprites图标与文字填充色实例页面

CSS代码：

li { font-size: 14px; margin-top: 5px; color: #369; }
.webicon { width: 16px; height: 16px; margin-right: 5px; fill: currentColor; vertical-align: -2px; }
                

HTML代码：

<strong>SVG Sprite fill color 使用</strong>
<ul id="ul">
    <li><svg class="webicon"><use xlink:href="#qianbi"/></svg>编辑信息</li>
    <li><svg class="webicon"><use xlink:href="#liwu"/></svg>兑换礼物</li>
    <li><svg class="webicon"><use xlink:href="#shangchuan"/></svg>上传文件</li>
</ul>
<strong>修改对应li元素的颜色</strong>
<ul id="color">
    <li><input type="color" value="#336699"></li>
    <li><input type="color" value="#336699"></li>
    <li><input type="color" value="#336699"></li>
</ul>
                

JS代码：

var url = "mytest.svg";
if (window.addEventListener) {
    var div = document.createElement("div");
    div.style.display = "none";
    document.body.appendChild(div);
    
    // 载入SVG
    if (localStorage.getItem(url)) {
        // 本地获取，减少请求
        div.innerHTML = localStorage.getItem(url);
    } else {
        var xhr = new XMLHttpRequest();
        xhr.open("get", url);
        xhr.onload = function() {
            if (xhr.responseText) {
                div.innerHTML = xhr.responseText;
                // 本地存储
                localStorage.setItem(url, xhr.responseText);    
            }
        };
        xhr.send(null);
    }
    
    // 改变颜色事件
    [].slice.call(document.querySelectorAll("#color input")).forEach(function(input, index) {
        input.addEventListener("change", function() {
            var value = this.value || "#369";
            document.querySelectorAll("#ul li")[index].style.color = value;    
        });
    });
} else {
    document.getElementById("ul").innerHTML = '<li style="color:#cd0000;">注定被无视的浏览器！</li>';
}