Question

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

 <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元素之前设置：但是在SVG层次结构中的图像节点上。

Answer 1

Pseudoelements不能应用于<image>标签。规范是这样说的：

请注意。该规范没有完全定义交互：before和：after with replacement elements（例如HTML中的IMG）。这个将在未来的规范中更详细地定义。

另见this answer

如何使用：在伪元素之前设置SVG节点的样式

1 个答案: