如何使用外部CSS更改SVG填充颜色

时间:2018-01-29 06:00:19

标签: html css svg sass

您好我有一个svg图片如下:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
    <title>Setting Icon</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Setting-Icon">
            <path class="set_icon" d="M12.890625,6.00585937 C12.7734369,5.55663838 12.6074229,5.1367207 12.3925781,4.74609375 L13.6816406,3.42773437 C13.7402347,3.40820303 13.7695313,3.34960986 13.7695313,3.25195312 C13.7695313,3.19335908 13.7402347,3.13476592 13.6816406,3.07617187 L11.9238281,1.31835937 C11.7871087,1.18163994 11.6699224,1.18163994 11.5722656,1.31835937 L10.2539063,2.60742187 C9.76562256,2.35351436 9.34570488,2.18750039 8.99414063,2.109375 L8.99414063,0.263671875 C8.99414063,0.0878897461 8.91601641,0 8.75976563,0 L6.24023438,0 C6.08398359,0 6.00585938,0.0878897461 6.00585938,0.263671875 L6.00585938,2.109375 C5.65429512,2.18750039 5.23437744,2.35351436 4.74609375,2.60742187 L3.42773438,1.31835937 C3.33007764,1.18163994 3.21289131,1.18163994 3.07617188,1.31835937 L1.31835938,3.07617187 C1.18163994,3.21289131 1.18163994,3.33007764 1.31835938,3.42773437 L2.60742188,4.74609375 C2.35351436,5.23437744 2.18750039,5.65429512 2.109375,6.00585937 L0.263671875,6.00585937 C0.0878897461,6.00585937 0,6.08398359 0,6.24023437 L0,8.26171875 C0,8.41796953 0.0878897461,8.49609375 0.263671875,8.49609375 L2.08007813,8.49609375 C2.19726621,9.12109687 2.3730457,9.70702852 2.60742188,10.2539062 L1.31835938,11.5722656 C1.25976533,11.591797 1.23046875,11.6503901 1.23046875,11.7480469 C1.23046875,11.8066409 1.25976533,11.8652341 1.31835938,11.9238281 L3.07617188,13.6816406 C3.21289131,13.8183601 3.33007764,13.8183601 3.42773438,13.6816406 L4.74609375,12.3925781 C4.98046992,12.5097662 5.2929668,12.6269525 5.68359375,12.7441406 C5.72265645,12.763672 5.83007725,12.8027341 6.00585938,12.8613281 L6.00585938,14.7363281 C6.00585938,14.9121103 6.08398359,15 6.24023438,15 L8.75976563,15 C8.91601641,15 8.99414063,14.9121103 8.99414063,14.7363281 L8.99414063,12.8613281 C9.16992275,12.8027341 9.27734355,12.763672 9.31640625,12.7441406 C9.7070332,12.6269525 10.0195301,12.5097662 10.2539063,12.3925781 L11.5722656,13.6816406 C11.6699224,13.8183601 11.7871087,13.8183601 11.9238281,13.6816406 L13.6816406,11.9238281 C13.8183601,11.7871087 13.8183601,11.6699224 13.6816406,11.5722656 L12.3925781,10.2539062 C12.666017,9.8242166 12.8417965,9.23828496 12.9199219,8.49609375 L14.7363281,8.49609375 C14.9121103,8.49609375 15,8.41796953 15,8.26171875 L15,6.24023437 C15,6.08398359 14.9121103,6.00585937 14.7363281,6.00585937 L12.890625,6.00585937 Z M7.5,9.99023438 C6.81640283,9.99023438 6.23047119,9.74609619 5.7421875,9.2578125 C5.25390381,8.76952881 5.00976563,8.18359717 5.00976563,7.5 C5.00976563,6.81640283 5.25390381,6.23047119 5.7421875,5.7421875 C6.23047119,5.25390381 6.81640283,5.00976562 7.5,5.00976562 C8.18359717,5.00976562 8.76952881,5.25390381 9.2578125,5.7421875 C9.74609619,6.23047119 9.99023438,6.81640283 9.99023438,7.5 C9.99023438,8.18359717 9.74609619,8.76952881 9.2578125,9.2578125 C8.76952881,9.74609619 8.18359717,9.99023438 7.5,9.99023438 L7.5,9.99023438 Z" id="Shape"></path>
        </g>
    </g>
</svg>

如您所见,我有一个附加到path元素的类,名为set_icon。我在我的一个scss文件中导入了这个svg,如下所示:

....
 &--settingIcon {
                position: relative;
                top: .5rem;
                float:left;
                margin-right: .5rem;
                background-image: url("/assets/images/GN_Setting.svg");
                width: 1.6rem;
                height: 1.6rem;
                background-repeat: no-repeat;
                .set_icon { fill: #fff;}
            }

但不知何故,白色的填充物没有发生。如果我在svg文件中添加填充路径元素,它的工作原理。我可以知道这里发生了什么错吗?提前谢谢。

0 个答案:

没有答案