在SVG上填充颜色不变

时间:2016-11-18 01:48:03

标签: javascript svg

我有一个SVG,我试图给出不同的颜色。我之前总是这样做,将我的十六进制颜色赋予fill选项。这通常就像一个魅力,我继续我的结婚方式。但由于某种原因,我无法理解这与我的SVG无关。我将发布代码并解释更多。

SVG

    <?xml version="1.0" encoding="UTF-8"?>
<svg width="30px" height="32px" viewBox="0 0 30 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
    <title>resend</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="App-Assets" stroke="#2C6D81" stroke-width="1" fill="#2C6D81" fill-rule="evenodd">
        <path d="M23.282379,28.3016743 C15.4171745,33.5297318 8.52508541,29.298172 8.52508541,29.298172 C8.52508541,29.298172 7.44663032,30.4349948 6.50599844,31.3964112 C5.56675873,32.4275162 5.1481845,32.0719627 5.00850508,30.8275258 C4.76766248,27.840877 4.27994463,22.3999616 4.27994463,22.3999616 L11.9711299,22.3999616 C13.3976235,22.3999616 14.0593605,22.755515 12.7725464,24.1426474 C11.8681106,25.2093077 10.9270146,26.3461305 10.9270146,26.3461305 C10.9270146,26.3461305 16.2872706,28.4092884 21.3681676,24.8537542 C25.056911,22.2942437 25.6499685,17.031579 25.6499685,15.9649187 C25.6499685,14.9333397 26.1028825,14.4720684 27.076462,14.4720684 L28.0152377,14.4720684 C28.9544774,14.4720684 29.4421952,15.0053986 29.4421952,15.9649187 C29.4440514,16.9239648 29.2700322,24.3204241 23.282379,28.3016743 L23.282379,28.3016743 Z M16.6696488,7.85735261 C17.5740847,6.79069235 18.5151806,5.65386954 18.5151806,5.65386954 C18.5151806,5.65386954 13.1549247,3.59071156 8.0740276,7.14624577 C4.38528426,9.70575632 3.79222677,14.968421 3.79222677,16.0350813 C3.79222677,17.0666603 3.33931275,17.5279316 2.36573324,17.5279316 L1.42695758,17.5279316 C0.487717858,17.5279316 1.86517468e-13,16.9946014 1.86517468e-13,16.0350813 C1.86517468e-13,15.1111164 0.174019217,7.71465717 6.15981622,3.69832573 C14.0250208,-1.56481303 20.9171098,2.70182801 20.9171098,2.70182801 C20.9171098,2.70182801 21.9955649,1.56500521 22.9361968,0.603588764 C23.8754365,-0.427516155 24.2940107,-0.0719627347 24.4336902,1.17247424 C24.6745328,4.15912297 25.1622506,9.60003844 25.1622506,9.60003844 L17.4710653,9.60003844 C16.0445718,9.60003844 15.3828347,9.24448502 16.6696488,7.85735261 L16.6696488,7.85735261 Z" id="resend" fill="#898989"></path>
    </g>
</svg>

你可以看到我有中风和填充。奇怪的是,笔划正在工作,但填充不是。我是SVG的新手,所以我可能做了一些明显的错误,但是我非常乐意帮助谢谢!

1 个答案:

答案 0 :(得分:0)

它非常隐蔽,但在路径标记的末尾你有一个fill属性。它比前一个更优先。删除它,它将工作:

&#13;
&#13;
<?xml version="1.0" encoding="UTF-8"?>
<svg width="30px" height="32px" viewBox="0 0 30 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
    <title>resend</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="App-Assets" stroke="#2C6D81" stroke-width="1" fill="#ff0000" fill-rule="evenodd">
        <path d="M23.282379,28.3016743 C15.4171745,33.5297318 8.52508541,29.298172 8.52508541,29.298172 C8.52508541,29.298172 7.44663032,30.4349948 6.50599844,31.3964112 C5.56675873,32.4275162 5.1481845,32.0719627 5.00850508,30.8275258 C4.76766248,27.840877 4.27994463,22.3999616 4.27994463,22.3999616 L11.9711299,22.3999616 C13.3976235,22.3999616 14.0593605,22.755515 12.7725464,24.1426474 C11.8681106,25.2093077 10.9270146,26.3461305 10.9270146,26.3461305 C10.9270146,26.3461305 16.2872706,28.4092884 21.3681676,24.8537542 C25.056911,22.2942437 25.6499685,17.031579 25.6499685,15.9649187 C25.6499685,14.9333397 26.1028825,14.4720684 27.076462,14.4720684 L28.0152377,14.4720684 C28.9544774,14.4720684 29.4421952,15.0053986 29.4421952,15.9649187 C29.4440514,16.9239648 29.2700322,24.3204241 23.282379,28.3016743 L23.282379,28.3016743 Z M16.6696488,7.85735261 C17.5740847,6.79069235 18.5151806,5.65386954 18.5151806,5.65386954 C18.5151806,5.65386954 13.1549247,3.59071156 8.0740276,7.14624577 C4.38528426,9.70575632 3.79222677,14.968421 3.79222677,16.0350813 C3.79222677,17.0666603 3.33931275,17.5279316 2.36573324,17.5279316 L1.42695758,17.5279316 C0.487717858,17.5279316 1.86517468e-13,16.9946014 1.86517468e-13,16.0350813 C1.86517468e-13,15.1111164 0.174019217,7.71465717 6.15981622,3.69832573 C14.0250208,-1.56481303 20.9171098,2.70182801 20.9171098,2.70182801 C20.9171098,2.70182801 21.9955649,1.56500521 22.9361968,0.603588764 C23.8754365,-0.427516155 24.2940107,-0.0719627347 24.4336902,1.17247424 C24.6745328,4.15912297 25.1622506,9.60003844 25.1622506,9.60003844 L17.4710653,9.60003844 C16.0445718,9.60003844 15.3828347,9.24448502 16.6696488,7.85735261 L16.6696488,7.85735261 Z" id="resend"></path>
    </g>
</svg>
&#13;
&#13;
&#13;

这实际上已经在50分钟前的评论中得到了解答...没有看到,我很抱歉