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

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了解更多详情。