更改從HTML img標籤一個SVG元素的顏色 - CSS

我有一個SVG我加載在HTML中，它看起來像這樣：更改從HTML img標籤一個SVG元素的顏色 - CSS

<img src="assets/img/big_layout.svg" alt="Line Overview" class="line_overview">

實際SVG文件看起來是這樣的：

<svg x="0" y="0" width="1466" height="825" viewBox="0 0 1466 825" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
style="display: block;margin-left: auto;margin-right: auto;"> 
<defs> 
<!-- SOME STYLES I've REMOVED --> 
</defs> 
<path fill-rule="evenodd" d="M0,0L1466,0l0,825L0,825L0,0Z" class="g1_1" /> 
<path fill-rule="evenodd" d="M0,0L1466,0l0,825L0,825L0,0Z" class="g1_1" /> 
<path fill-rule="evenodd" d="M187,21l195,0l0,195l-195,0L187,21Z" 
// LOADS MORE PATHS!!!!

我希望能夠從父html中更改此svg中的一些樣式，例如在.g1_1類中添加fill: green。這可能嗎？

來源

2016-10-21 George Edwards

這可能對你有幫助嗎？ http://stackoverflow.com/questions/10139460/modify-stroke-and-fill-of-svg-image-with-javascript#10141550 –

其實有[一個黑客]（https://gist.github.com/ LeaVerou/5198257），它涉及[：target]（https://developer.mozilla.org/en-US/docs/Web/CSS/:target）選擇器和svg本身內部設置的不同CSS規則。然後，您只需將URL的哈希標識符更改爲某個已定義的元素（'myFile.svg＃myBlueGroup' /'myFile.svg＃myRedGroup'），但這只是一種破解，因此不值得重新打開您的問題，並且不回答欺騙（cc @PaulLeBeau） – Kaiido

如果要加載在標記中的SVG的選項，那麼你可以做到以下幾點：

<html> 
... 
<svg></svg> 
... 
</html>

，然後通過CSS樣式吧：

svg .g1_1 { 
    fill: green; 
}

一個例子：

svg { 
 
    width: 64px; 
 
} 
 

 
svg polygon { 
 
    fill: red; 
 
} 
 

 
svg:hover polygon { 
 
    fill: green; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48"> 
 
    <g> 
 
    <polygon fill="none" points="18,4 10,12 22,24 10,36 18,44 38,24 "></polygon> 
 
    </g> 
 
</svg>

來源

2016-10-21 23:18:05 Luke

更改從HTML img標籤一個SVG元素的顏色 - CSS

回答

相關問題