Question

找不到使用css :before在<use>标记内添加<svg>的示例。到目前为止，我已经尝试过：

.icon-test:before {
  content : '<use xlink:href="test.svg#icon-test"></use>';
}

.icon-test:before {
  content : '\003Cuse xlink\003Ahref\003D\0022test\002Esvg\0023icon-test\0022\003E\003C\002Fuse\003E';
}

<svg class="icon-test"></svg>

有人知道正确的方法吗？或者这是不可能的？

基本上，最终结果应该产生类似：

<svg class="icon-test">
  <use xlink:href="test.svg#icon-test"></use>
</svg>

但我希望使用:before来简化使用。谢谢！

Answer 1

使用::之前
是不可能的。您将收到文字;

Answer 2

与Jarosław Goszowski's answer相比更详细一点：

::before和::after伪元素创建一个新的CSS布局框，作为CSS布局框的第一个或最后一个子元素，用于与选择器的其余部分匹配的元素。

::表示法区分伪元素选择器和伪类选择器，以及is supported in all browsers after IE8（换句话说，所有支持内联SVG的浏览器）。仅支持单:语法以实现向后兼容性。

psuedo-elements 不在DOM中创建新元素，不能用于插入标记。它们只影响CSS布局。在解析HTML标记之后，将注入内容。你甚至不能使用像&这样的HTML实体;你肯定不能使用整个元素标记。

因为它们只影响CSS布局，所以伪元素只能存在于内容遵循CSS布局模型的元素中。这意味着你不能具有伪元素：

<img>和<video>个元素（元素的内容被外部文件替换，它没有CSS布局模型）;

<input>和<select>元素（内容由浏览器创建的表单小部件替换，没有CSS布局模型）;

SVG元素（内容根据SVG规则绘制，而不是CSS布局）。

因此，有两个原因导致您不能使用伪元素来注入<use>元素：一，伪元素对SVG没有影响;二，即使他们这样做，假元素只能用于注入纯文本（或完整的图像文件），而不是标记。

使用方法：在为<svg>标签添加<use>之前？</svg> </use>

2 个答案: