如何使用：before伪元素设置SVG节点的样式[重复]答案

【问题标题】：How to style SVG node with :before pseudo element [duplicate]如何使用：before伪元素设置SVG节点的样式[重复]
【发布时间】：2017-01-26 22:13:57
【问题描述】：

我正在尝试设置 react-d3-map 的标记图像的样式。没有办法改变它的图像（除了改变库的代码），所以我试图隐藏它并使用 :before 伪元素。

 <image class="icon-map-marker marker"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        xlink:href="data:image/png;base64,[...]==" <!-- hardcoded in library -->
        x="141.98888888888882" y="163.8247013673872"
        height="25" width="25"
 </image>

但 chrome 的开发者控制台中的所有 css 定义都是灰色的，当然不能正常工作——在 FF 中类似

[class*="icon-"]:before {
  content: "0";
  min-width: 1em;
  text-align: left;
  display: inline-block;
  font-size: 18px;
}
.icon-map-marker:before {
    content: "\107F";
}

这个 CSS 非常适合 HTML 元素。是否可以为 SVG 节点创建伪元素？是否可以通过其他方式更改此图像？

更新：我不想在 SVG 元素上设置 :before。但在 SVG 层次结构内的图像节点上。

【问题讨论】：

@Mr_Green，我认为这里正好相反，OP 想要将 before 伪元素 on 设置为 SVGElement。但这是不可能的;-)

标签： css d3.js svg pseudo-element

【解决方案1】：

伪元素不能应用于<image> 标签。规格是这样说的：

注意。本规范没有完全定义交互 :before 和 :after 替换元素（例如 HTML 中的 IMG）。这将在未来的规范中更详细地定义。

另见this answer

【讨论】：

<image> 不是 IMG，但任何 svg 元素都被视为替换元素。
从来没有说过 = 。 note sais “例如 IMG” ...
但您的引文中没有任何内容表明它适用于 <image> 或一般的 svg 元素。