Question

大多数d3.js示例使用SVG绘制图表等。这意味着例如rect而不是div。这再次意味着，无法应用drop-shadow等CSS属性。

另一种方法是在<defs>中定义过滤器。如果要使用渐变颜色填充rect，情况也是如此。那是对的吗？

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

我尝试过这样的事情：filter: url(.../my_file.svg)但它似乎不起作用，但这不是它应该是怎么回事？

Answer 1

假设您有一个名为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>

如果您在同一文档中使用my_filter，则只需使用#my_filter引用它即可。但你不是。您想在另一个文档中使用它。您需要做的是在这些文档中将其称为/filters.svg#my_filter。像这样：

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

这当然是假设两个文档都可以从同一个域访问，并且它们位于正确的位置，等等。我不知道这是否适用于CSS样式表，但它可以在SVG中使用文档。查看section on Linking in the SVG Specification了解更多详情。

使用d3.js对SVG样式感到困惑

1 个答案: