4

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

在尝试使用 :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 元素时，还支持哪些其他显示模式？

4

1 回答 1

3

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

于 2013-02-21T15:08:13.140 回答