是否可以通过 :after 伪 CSS 选择器在 svg 标签内使用插入 img？

【问题标题】：Is it possible to use insert img through :after pseudo CSS selector inside a svg tag?是否可以通过 :after 伪 CSS 选择器在 svg 标签内使用插入 img？
【发布时间】：2012-12-06 00:36:21
【问题描述】：

我有一系列<circle>，它们通过<svg> 中的算法动态定位。我想在每个圈子旁边添加一个图标，我正在尝试通过：

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

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

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

【问题讨论】：

您不能在添加<circle> 元素的同时动态添加图像吗？
@robertc 是的，我可以，但这与我的问题无关；）

标签： html css svg

【解决方案1】：

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

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

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

【讨论】：

哇，您的个人资料表明您是一个高素质的回答者！你能多说一点：任何文件都这样规定吗？它是特定于 Firefox 的实现选择吗？
问题是，:after 不会将内容放在元素/标签本身之后，而是将内容附加到元素的（文本）内容中。例如，您不能在<img> 或<input> 上使用它，我认为这是类似的情况。