Javascript 从html img tag-css更改一个svg元素的颜色_Javascript_Html_Css_Svg

Javascript 从html img tag-css更改一个svg元素的颜色

javascript html css svg

Javascript 从html img tag-css更改一个svg元素的颜色,javascript,html,css,svg,Javascript,Html,Css,Svg,我在html中加载了一个svg，如下所示： <img src="assets/img/big_layout.svg" alt="Line Overview" class="line_overview"> <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

我在html中加载了一个svg，如下所示：

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

<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!!!!

实际的svg文件如下所示：

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

<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!!!!


如果您可以选择在标记中加载svg，则可以执行以下操作：
<html>
...
<svg></svg>
...
</html>

例如：

svg{
宽度：64px；
}
svg多边形{
填充物：红色；
}
svg：悬停多边形{
填充：绿色；
}

这可能对您有帮助吗？实际上，这涉及到svg本身中的选择器和不同的CSS规则集。然后，您只需将url的哈希标识符更改为某个已定义的元素（myFile.svg#myBlueGroup
/myFile.svg#myRedGroup
），但这只是一种黑客行为，因此不值得重新打开您的问题，也不回答重复（cc@PaulLeBeau）