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

Question

根据 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>

当然，这是无法做到的，但有没有不使用 JavaScript 的替代方案？

Answer 1

是的你可以。

SVG 元素的操作方式与任何其他 HTML/DOM 元素几乎相同。例如，使用 Raphael JS (http://raphaeljs.com/)，您至少可以在浏览器窗口中找到矢量/SVG 元素的绝对位置，并将其与页眉/页脚的绝对位置进行比较并且，使用 JQuery，触发一个事件来改变 SVG 的颜色。

Raphael 还为旧版本的 IE 呈现 VML 图形。所以非常值得研究。

也就是说，如果您不打算使用 JavaScript，那么请改用 CSS。更新了一个工作示例，可在此处找到；

http://jsfiddle.net/Zp6HS/4/

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

Answer 2

重新开始，这是我能找到的对您的问题的最佳问题/答案：

如何将样式应用于嵌入式 SVG？

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

我认为你应该尽量不要问多余的问题。我们都做得很好，早点采购。

Answer 3

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

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