html - 是否可以通过 :after pseudo CSS selector inside a svg tag? 使用插入图像

Question

我有一系列 <circle>通过算法在 <svg> 中动态定位.我想在每个圆圈旁边添加一个图标，我正在尝试通过:

.node:after {
      content:url(/img/icon.png);
}

选择器是正确的，因为我在 Firebug 中看到它但没有显示图标。我在尝试做一些不可能的事情吗？为什么我在某处看不到我的图标？

额外问题:是否可以相对于圆形元素的中心定位此图标。

Answer 1

我们会忽略 Firefox 中 SVG 标记中生成的内容，因此您无法通过这种方式执行此操作。您必须创建 <image>使用 javascript 的元素。

SVG 规范没有提到 :before 和 :after。它真的只在你有相对定位的 html 中才有意义，所以下一个元素会自动定位在前一个元素之后，而不是在一切都是绝对定位的 SVG 中。

您必须尝试其他浏览器，看看它是否在那里工作，但我真的不知道他们如何明智地实现它。