如何更改SVG的路徑顏色？

更新： 是的，我知道也有類似的問題，但解決方案也不起作用。如何更改SVG的路徑顏色？

我想改變SVG的顏色，我的意思是路徑的顏色，而不是顏色「內部」，但路徑本身。

我第一次嘗試與CSS，它根本沒有工作。然後用js，它幾乎可以工作：

這可以工作，也就是加載圖像。它默認爲黑色。

<object id = 'test' data="images/icons/040__file_delete.svg" type="image/svg+xml"></object>

我想將其更改爲綠色。

<script> 
     $(function(){ 
      document.getElementById("test").addEventListener("load", function() { 
       var doc = this.getSVGDocument(); 
       console.log(doc);//works fine 
       var p = doc.querySelector("path"); //works 
       p.setAttribute("stroke", "green"); 
      });  
     }) 
    </script>

以上做了「工作」，但增加了一個「邊界」的路徑。我也嘗試過使用「color」，「fillcolor」，「fill」 - 沒有任何作用。

更新II：該SVG的源：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" id="圖層_1" x="0px" y="0px" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve"> 
<style type="text/css"> 
    .st0{fill:#231815;} 
</style> 
<g> 
    <g> 
     <g> 
      <g> 
       <g> 
        <path class="st0" d="M13,17.5H5c-1.4,0-2.5-1.1-2.5-2.5V3c0-1.4,1.1-2.5,2.5-2.5h3.6c0.4,0,0.8,0.2,1.1,0.4l5.4,5.4  c0.3,0.3,0.4,0.7,0.4,1.1V15C15.5,16.4,14.4,17.5,13,17.5z M5,1.5C4.2,1.5,3.5,2.2,3.5,3v12c0,0.8,0.7,1.5,1.5,1.5h8  c0.8,0,1.5-0.7,1.5-1.5V7.4c0-0.1-0.1-0.3-0.1-0.4L8.9,1.6C8.8,1.6,8.7,1.5,8.6,1.5H5z" fill="green"/> 
       </g> 
       <g> 
        <path class="st0" d="M15,7.5h-4C9.6,7.5,8.5,6.4,8.5,5V1c0-0.3,0.2-0.5,0.5-0.5S9.5,0.7,9.5,1v4c0,0.8,0.7,1.5,1.5,1.5h4  c0.3,0,0.5,0.2,0.5,0.5S15.3,7.5,15,7.5z"/> 
       </g> 
      </g> 
      <g> 
       <g> 
        <path class="st0" d="M10.5,13.9c-0.1,0-0.3,0-0.4-0.1l-3-3C7,10.5,7,10.2,7.1,10s0.5-0.2,0.7,0l3,3c0.2,0.2,0.2,0.5,0,0.7  C10.8,13.8,10.6,13.9,10.5,13.9z"/> 
       </g> 
       <g> 
        <path class="st0" d="M7.5,13.9c-0.1,0-0.3,0-0.4-0.1C7,13.5,7,13.2,7.1,13l3-3c0.2-0.2,0.5-0.2,0.7,0s0.2,0.5,0,0.7l-3,3  C7.8,13.8,7.6,13.9,7.5,13.9z"/> 
       </g> 
      </g> 
     </g> 
    </g> 
</g> 
</svg>

來源

2016-03-07 konrad_firm

'stroke'是一個路徑的'邊界'。無論你想要填充還是中風，你都提到了兩個，所以我沒有看到你想要完成的。你可以把它放到「SO片段」中，以便我們看到問題所在？（另外我認爲使用'object'標記，你需要添加一個'style'元素到svg，我不知道jQuery可以讀這個shadow DOM） – somethinghere

@somethinghere - 好吧，我不想中風（大綱）。我希望路徑本身變成綠色。順便說一句。我添加了完成SVG的內容。 –

筆劃_is_是您的路徑的彩色版本。 – somethinghere

的fill和/或路徑（S）上stroke屬性不重寫CSS樣式（here's why）。

您需要做的是重寫CSS樣式本身，這可以通過設置style屬性來完成，例如，

<path style="fill:green" ...>

或者在javascript

element.setAttribute('style', 'fill: green');

在你的迴應，你提到你解決「單一路徑」的問題，以便爲太這裏提供一個例子就是爲什麼，以及如何我的評論修理它。

querySelector方法只提供匹配的第一個元素（如果有的話），您想要使用querySelectorAll方法，它將提供包含所有匹配元素的NodeList。

var paths = doc.querySelectorAll("path"), 
    i; 

for (i = 0; i < paths.length: ++i) { 
    paths[i].setAttribute('style', 'fill:green'); 
}

正如我在我的評論中提到，該getSVGDocument()方法可能無法在您需要支持所有瀏覽器都存在（我什麼都不知道你的要求，這僅僅是一個擡頭），你可能有興趣在.contentDocument屬性as described here

來源

2016-03-07 14:17:36

這裏會發生什麼情況是，對象不是簡單的路徑，但實際上整個「行程」已被改造成一個大的對象。當您從各種繪圖應用程序中輸入花哨的對象（或不那麼奇特）畫筆設置時，可能會發生這種情況。您也可以使用Adobe Illustrator，IIRC中的Outline功能獲得相同的結果。

爲了避免這種情況，在其原來的插圖軟件編輯原始對象，請嘗試以下操作：

使用簡單的行程，也沒有刷。這可能工作。
在原始編輯器中不使用筆劃，並將其應用於SVG中的JS或CSS。

來源

2016-03-07 13:25:50

看到這個問題的大綱功能的解釋http://graphicdesign.stackexchange.com/q/45865/13414 –

我添加了SVG的內容。我沒有看到任何複雜的。不，我不想「中風」，我想爲路徑着色。現在是黑色的，我想改變這一點。假設這條道路帶來「O」形狀 - 我希望它像現在一樣，只有那個綠色。 @加布裏埃爾-R –

如何更改SVG的路徑顏色？

回答

相關問題