分配给 SVG:text 的伪元素后意外重复。使用伪元素和 SVG答案

【问题标题】：Unexpected duplication of :after pseudo element assigned to SVG:text. Working with pseudo elements and SVG分配给 SVG:text 的伪元素后意外重复。使用伪元素和 SVG
【发布时间】：2013-02-02 23:53:53
【问题描述】：

这是一个由两部分组成的问题，见下文。

在尝试使用 :after 伪元素通过 CSS 将 % 符号添加到 SVG 文本实例时，我遇到了这个问题（JsFiddle 提供）。我使用的是 Chrome 版本 24.0.1312.57。

HTML：

<span class="percentage2">This is 20</span>
<p class="percentage2">This is 20</p>
<h1 class="percentage2">This is 20</h1>
<div class="wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <text x="20" y="20" style="fill:black;" class="percentage2">This is 20</text>
    </svg>
</div>

CSS：

.wrapper {
    width: 300px;
    height:80px;
    overflow:hidden;
}

.percentage2:after {
    content:"%";
    display: inline-block;
    font-size: 0.7em;
    position:relative;
    left:100px;
}

出乎意料的结果是 % 符号出现了两次：一次在包装元素的最左边缘，一次在它应该定位的位置。

第一个问题：为什么会这样？

如果我没有指定 display:inline-block :after 内容将作为内联插入 HTML 元素中，但不会出现在 SVG 中。

CSS：

.percentage1:after {
    content:"%";
    font-size:0.7em;
}

屏幕截图：

第二个问题：有没有办法将内联伪元素添加到 SVG 文本元素？将 :after 元素应用于 SVG 元素时，还支持哪些其他显示模式？

【问题讨论】：

我认为 SVG 不支持 :after 和 :before 伪元素。我很惊讶它们甚至出现了，尽管我找不到任何确认它们不受支持的参考。希望有更多知识的人加入。
它们在 SVG 规范中没有定义，Firefox 也不支持。
没有定义它们是否意味着应用它们会导致意外行为？
在 Chrome 中看起来不是这样吗？在 Firefox 中，我们故意禁用它们以防止出现这种奇怪现象。
好的，我想我会验证任何提到当前支持或缺乏通用浏览器的答案。

标签： html css google-chrome svg pseudo-element

【解决方案1】：

就像 Duopixel 所写，SVG 不支持应用于 svg 元素的 CSS :before 或 :after 伪元素。 SVG 将来可能会允许这样做，但它应该如何工作仍然没有定义。

【讨论】：

看看除了 Chrome 之外的其他浏览器会出现什么其他副作用可能很有趣（或不有趣）。