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



我有一系列通过算法动态定位<svg> <circle>。我想在每个圆圈旁边添加一个图标,我正在尝试通过以下方式进行:

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

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

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

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

SVG 规范没有提到 :before 和 :after。它实际上只在具有相对定位的html中有意义,因此下一项会自动定位在上一项之后,而不是在SVG中,所有内容都绝对定位。

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

最新更新