Javascript 对d3.js的SVG样式感到困惑

大多数d3.js示例使用SVG绘制图表等。这意味着例如

rect

而不是

div

。这同样意味着，像

drop shadow

这样的CSS属性无法应用

另一种方法是在

中定义过滤器。如果您想用渐变色填充

rect

，情况也是如此。到目前为止是这样吗

所以我定义了一些过滤器和渐变，但是为每个页面重新定义这些定义似乎是非常多余的。难道不可能从一个单独的svg文件中引用所有这些定义吗

---

我试过这样的方法：

filter:url（…/my_file.svg）

但它似乎不起作用，但这不是应该的吗？

假设您有一个名为

filters.svg

的文件，其中包含一些过滤器定义。它看起来像这样：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="my_filter" x="0%" y="0%" width="100%" height="100%">
    ...
  </filter>
</svg>

---

当然，这是假设两个文档可以从同一个域访问，并且它们位于正确的位置，等等。我不知道这是否适用于CSS样式表，但它适用于SVG文档。查看以了解更多详细信息。

谢谢。可以在Firefox中使用，但还不能在Chrome中使用：）

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" width="100" height="100" fill="url(/filters.svg#my_filter)" />
</svg>