如何根据SVG对象的包含或位置更改其样式？

根据SVG对象的父html标记，我希望更改其路径颜色。这可以通过SVG实现吗？例如，如果一个徽标在页眉，我希望它是红色的，如果它在页脚，我希望它是蓝色的。下面是一个例子：

<style type="text/css">
   #header-img {
       fill:blue;
   }

   #footer-img {
       fill:black;
   }

</style>
...
<header>
   <object id="header-img" type="image/svg+xml" data="myimg.svg" />
</header>
...
<footer>
   <object id="footer-img" type="image/svg+xml" data="myimg.svg" />
</footer>

#收割台img{
填充：蓝色；
}
#页脚img{
填充：黑色；
}
...
...

当然，这是不可能做到的，但是如果不使用JavaScript，还有其他选择吗？

是的，你可以

SVG元素的操作方式与任何其他HTML/DOM元素基本相同。例如，拉斐尔JS(http://raphaeljs.com/)您至少可以在浏览器窗口中找到vector/SVG元素的绝对位置，将其与页眉/页脚的绝对位置进行比较，并使用JQuery触发事件以更改SVG的颜色

Raphael还为IE的旧版本渲染了VML图形，因此非常值得研究

这就是说，如果您不打算使用JavaScript，那么就改用CSS。 更新了一个工作示例，如下所示

---

用自定义路径和要更改的css属性替换“circle”元素。

再次开始，这是我能找到的关于您问题的最佳问题/答案：

您可以手动将链接样式表添加到要嵌入的文件中。。。 从而避免使用JavaScript

我认为你应该尽量不要问多余的问题。

---

如果我们早一点找到这个，我们都会做得很好。

你不能在css中使用'parent of'操作符吗？像这样：

<style>
  header > svg {
   fill:blue;
  }
  body > svg {
    fill:black;   
  }
</style>

标题>svg{
填充：蓝色；
}
body>svg{
填充：黑色；
}

我试过这个，但没用。我读到的所有内容都表明，除非SVG对象是内联的，否则不能使用CSS操作SVG，这意味着您需要在页面上复制它。基本原理是css不能跨越文件边界。你真的测试过吗？--它在铬上工作良好。无法保证其他浏览器，在这种情况下，您的问题范围会发生变化，我将被迫推荐Raphael或类似的库。但是是的。。。从我所看到的，你可以用CSS操纵SVG属性。我使用的形状非常复杂。我想把它链接起来，而不是排成一行。然后将“path”元素作为目标，比如“#header svg path”。Tbh，我首先在本地机器上进行了测试，但将复杂的路径数据放入js FIDLE似乎不切实际。它仍然以大致相同的方式工作。我对“路径”感到困惑。你是指URL还是元素绘图路径。不是，因为SVG数据位于单独文档中的

标记内，CSS不会跨越文档边界。如果SVG是内联的，这会起作用，但问题不是这样的。