如何轻松使用svg作为图标？

时间：2016-07-05 15:36:56

标签： javascript jquery html css svg

我不理解＆＃34;有用性＆＃34; svg，因为它不容易用CSS或Jquery修改。 例如：

<object data="../headset.svg" width="30" height="25" type="image/svg+xml" class="svg svg-danger" id="mysvg">

很好，我可以决定尺寸，但填充颜色。我想在文档中多次重用这个svg。

使用：     var a = document.getElementById（＆＃34; mysvg＆＃34;）。contentDocument;

我只是未定义。

内部svg，我不想在我的文档中硬编码：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 361.014 361.014" style="enable-background:new 0 0 361.014 361.014;" xml:space="preserve">
<g>
<g id="Layer_5_47_">
<path d="M331.035,126.94H318.01c-3.563,0-3.682-2.333-3.805-3.494C307.375,59.094,252.77,8.791,186.637,8.791h-12.26    c-65.644,0-119.929,49.56-127.409,113.229c-0.191,1.631-0.291,4.92-3.291,4.92H29.978C20.987,126.94,0,136.401,0,184.18v25.075    c0,35.436,20.987,43.609,29.978,43.609h43.584c8.991,0,16.347-7.356,16.347-16.347v-93.23c0-8.991-7.356-16.347-16.347-16.347    c0,0-2.052-0.18-1.529-3.835c7.192-50.319,50.129-89.313,102.344-89.313h12.26c51.86,0,94.912,38.418,102.2,88.288    c0.235,1.608,1.111,4.86-1.385,4.86c-8.991,0-16.347,7.356-16.347,16.347v93.23c0,8.991,7.356,16.347,16.347,16.347h8.184    c2.25,0,1.868,1.798,1.667,2.704c-6.667,30.104-21.637,64.256-55.238,64.256h-24.889c-2.54,0-3.167-1.861-3.65-2.743    c-4.032-7.367-11.851-12.364-20.841-12.364h-22.933c-13.118,0-23.753,10.634-23.753,23.753c0,13.119,10.635,23.752,23.753,23.752    h22.933c9.112,0,17.023-5.132,21.005-12.662c0.348-0.658,0.633-2.026,3.321-2.026h25.054c22.823,0,53.365-11.341,69.259-65.373    c1.694-5.758,3.068-11.496,4.187-17.026c0.154-0.761,0.25-2.27,2.625-2.27h12.9c8.991,0,29.978-8.174,29.978-43.609v-25.075    C361.013,137.082,340.026,126.94,331.035,126.94z" />
    </g>
</g>

</svg>

1 /如何用jquery或橙色将其涂成红色？我只是没有得到它。 2 /为什么svg不容易使用？ 谢谢，

燕姿。

2 个答案:

答案 0 :(得分：1)

因为你需要将svg嵌入为实际的SVG，所以你的CSS适用于它，你可以使用这样的小实用程序脚本：

function replaceSVGS(elements){
    if(!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) return;
    elements.forEach(function(e){
        var src = e.getAttribute('data-svg');
        if(!src) return;
        var request = new XMLHttpRequest;
        request.addEventListener("load", function(){
            var a = document.createElement('div');
            a.innerHTML = this.responseText;
            a = a.querySelector('svg');
            e.parentNode.insertBefore(a, e);
            e.parentNode.removeChild(e);
        });
        request.open("GET", src);
        request.send();
    });
}

上面的脚本会用svg替换元素，只要它们有data-svg - 我建议像这样使用它：

replaceSVGS( Array.prototype.slice.call(document.querySelectorAll('img[data-svg]')) );

现在您根本不必复制粘贴代码，此脚本将确保在适当的位置插入SVG。您只需要一个data-svg的元素：

<img src="test.jpg" data-svg="test.svg" />

答案 1 :(得分：0)

考虑在CSS中使用SVG，你可以在这里编译它（没有base64和mime类型image / svg + xml：http://dopiaza.org/tools/datauri/index.php

然后在SVG中添加一个红色填充路径，并创建一个可重用的“.red”CSS类。

这不是理想的，但它比将svg代码放在页面本身更好。

.mysvg {
  width: 50px;
  height: 50px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22Capa_1%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20361.014%20361.014%22%20style%3D%22enable-background%3Anew%200%200%20361.014%20361.014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%3Cg%20id%3D%22Layer_5_47_%22%3E%0D%0A%3Cpath%20d%3D%22M331.035%2C126.94H318.01c-3.563%2C0-3.682-2.333-3.805-3.494C307.375%2C59.094%2C252.77%2C8.791%2C186.637%2C8.791h-12.26%20%20%20%20c-65.644%2C0-119.929%2C49.56-127.409%2C113.229c-0.191%2C1.631-0.291%2C4.92-3.291%2C4.92H29.978C20.987%2C126.94%2C0%2C136.401%2C0%2C184.18v25.075%20%20%20%20c0%2C35.436%2C20.987%2C43.609%2C29.978%2C43.609h43.584c8.991%2C0%2C16.347-7.356%2C16.347-16.347v-93.23c0-8.991-7.356-16.347-16.347-16.347%20%20%20%20c0%2C0-2.052-0.18-1.529-3.835c7.192-50.319%2C50.129-89.313%2C102.344-89.313h12.26c51.86%2C0%2C94.912%2C38.418%2C102.2%2C88.288%20%20%20%20c0.235%2C1.608%2C1.111%2C4.86-1.385%2C4.86c-8.991%2C0-16.347%2C7.356-16.347%2C16.347v93.23c0%2C8.991%2C7.356%2C16.347%2C16.347%2C16.347h8.184%20%20%20%20c2.25%2C0%2C1.868%2C1.798%2C1.667%2C2.704c-6.667%2C30.104-21.637%2C64.256-55.238%2C64.256h-24.889c-2.54%2C0-3.167-1.861-3.65-2.743%20%20%20%20c-4.032-7.367-11.851-12.364-20.841-12.364h-22.933c-13.118%2C0-23.753%2C10.634-23.753%2C23.753c0%2C13.119%2C10.635%2C23.752%2C23.753%2C23.752%20%20%20%20h22.933c9.112%2C0%2C17.023-5.132%2C21.005-12.662c0.348-0.658%2C0.633-2.026%2C3.321-2.026h25.054c22.823%2C0%2C53.365-11.341%2C69.259-65.373%20%20%20%20c1.694-5.758%2C3.068-11.496%2C4.187-17.026c0.154-0.761%2C0.25-2.27%2C2.625-2.27h12.9c8.991%2C0%2C29.978-8.174%2C29.978-43.609v-25.075%20%20%20%20C361.013%2C137.082%2C340.026%2C126.94%2C331.035%2C126.94z%22%20%2F%3E%0D%0A%20%20%20%20%3C%2Fg%3E%0D%0A%3C%2Fg%3E%0D%0A%0D%0A%3C%2Fsvg%3E");
}
.mysvg.red {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22Capa_1%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20361.014%20361.014%22%20style%3D%22enable-background%3Anew%200%200%20361.014%20361.014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%3Cg%20id%3D%22Layer_5_47_%22%3E%0D%0A%3Cpath%20fill%3D%22red%22%20d%3D%22M331.035%2C126.94H318.01c-3.563%2C0-3.682-2.333-3.805-3.494C307.375%2C59.094%2C252.77%2C8.791%2C186.637%2C8.791h-12.26%20%20%20%20c-65.644%2C0-119.929%2C49.56-127.409%2C113.229c-0.191%2C1.631-0.291%2C4.92-3.291%2C4.92H29.978C20.987%2C126.94%2C0%2C136.401%2C0%2C184.18v25.075%20%20%20%20c0%2C35.436%2C20.987%2C43.609%2C29.978%2C43.609h43.584c8.991%2C0%2C16.347-7.356%2C16.347-16.347v-93.23c0-8.991-7.356-16.347-16.347-16.347%20%20%20%20c0%2C0-2.052-0.18-1.529-3.835c7.192-50.319%2C50.129-89.313%2C102.344-89.313h12.26c51.86%2C0%2C94.912%2C38.418%2C102.2%2C88.288%20%20%20%20c0.235%2C1.608%2C1.111%2C4.86-1.385%2C4.86c-8.991%2C0-16.347%2C7.356-16.347%2C16.347v93.23c0%2C8.991%2C7.356%2C16.347%2C16.347%2C16.347h8.184%20%20%20%20c2.25%2C0%2C1.868%2C1.798%2C1.667%2C2.704c-6.667%2C30.104-21.637%2C64.256-55.238%2C64.256h-24.889c-2.54%2C0-3.167-1.861-3.65-2.743%20%20%20%20c-4.032-7.367-11.851-12.364-20.841-12.364h-22.933c-13.118%2C0-23.753%2C10.634-23.753%2C23.753c0%2C13.119%2C10.635%2C23.752%2C23.753%2C23.752%20%20%20%20h22.933c9.112%2C0%2C17.023-5.132%2C21.005-12.662c0.348-0.658%2C0.633-2.026%2C3.321-2.026h25.054c22.823%2C0%2C53.365-11.341%2C69.259-65.373%20%20%20%20c1.694-5.758%2C3.068-11.496%2C4.187-17.026c0.154-0.761%2C0.25-2.27%2C2.625-2.27h12.9c8.991%2C0%2C29.978-8.174%2C29.978-43.609v-25.075%20%20%20%20C361.013%2C137.082%2C340.026%2C126.94%2C331.035%2C126.94z%22%20%2F%3E%0D%0A%20%20%20%20%3C%2Fg%3E%0D%0A%3C%2Fg%3E%0D%0A%0D%0A%3C%2Fsvg%3E");  
}
<div class="mysvg"></div>
<div class="mysvg red"></div>

相关问题
最新问题