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/

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

Answer 2

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

How to apply a style to an embedded SVG?

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

我认为你应该尽量不要提出多余的问题。我们两个都做得很好，早些时候采购了这个。

Answer 3

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

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

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

3 个答案: