Question

我正在使用grunticon来添加svg。

一切正常，但我正在努力用css来设计svg。

我很想简单地填写svg的填充颜色。

    <!DOCTYPE html>
    <html lang="en">

        <head>  
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

            <!--jQuery-->
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

            <!--css-->
            <style type="text/css">

                .icon-heart{
                    background: red;
                }

                .icon-heart{
                    fill: red;
                }   

            </style>

            <title>Title of the document</title>

            <script>
                /* grunticon Stylesheet Loader | https://github.com/filamentgroup/grunticon | (c) 2012 Scott Jehl, Filament Group, Inc. | MIT license. */
    window.grunticon=function(e){if(e&&3===e.length){var t=window,n=!(!t.document.createElementNS||!t.document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||window.opera&&-1===navigator.userAgent.indexOf("Chrome")),o=function(o){var r=t.document.createElement("link"),a=t.document.getElementsByTagName("script")[0];r.rel="stylesheet",r.href=e[o&&n?0:o?1:2],a.parentNode.insertBefore(r,a)},r=new t.Image;r.onerror=function(){o(!1)},r.onload=function(){o(1===r.width&&1===r.height)},r.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}};
                grunticon(["images/output/icons.data.svg.css", "images/output/icons.data.png.css", "images/output/icons.fallback.css"]);
            </script>

            <noscript><link href="icons.fallback.css" rel="stylesheet"></noscript>

        </head>

    <body>

        <div class="icon-heart-1" style="height: 50px; width: 50px;"></div>
        <div class="icon-heart" style="height: 50px; width: 50px;"></div>

    </body>

    </html>

Answer 1

你需要确保你使用的svg没有填充=“{color}”或style =“fill：{color}”硬编码，因为这些将覆盖你应用的任何css样式。

我认为你必须通过手动更新svg来做到这一点，除非有一种咕噜咕噜的方式去做。

Answer 2

要通过css更改样式属性，您需要将svg嵌入到dom中。 Grunticon（高于v2.0）提供了一种简单的方法。您需要在gruntfile中启用enhanceSVG选项，然后可以在div上使用data-grunticon-embed属性来嵌入它。查看他们的文档以获取更多信息 https://github.com/filamentgroup/grunticon#version-20-is-out---heres-whats-new

svg grunticon，css填充颜色

2 个答案: