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

Posted 2023-03-06

【中文标题】如何使用：before伪元素设置SVG节点的样式[重复]

【英文标题】：How to style SVG node with :before pseudo element [duplicate]

【发布时间】：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"
         
 </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。但这是不可能的;-)

【参考方案1】：

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

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

另见this answer

【讨论】：

<image> 不是 IMG，但任何 svg 元素都被视为替换元素。

从来没有说过 = 。 note sais “例如 IMG” ...

但您的引文中没有任何内容表明它适用于 <image> 或一般的 svg 元素。