意外重复：在分配给SVG：文本的伪元素之后。使用伪元素和SVG

这是一个由两部分组成的问题，请参见下文。意外重复：在分配给SVG：文本的伪元素之后。使用伪元素和SVG

虽然试图通过CSS添加一个％符号通过使用：after伪元素的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; 
}

的意想不到的结果是％符号出现两次：在所述包装元素的最左边边缘一次，一旦它被认为是定位。

enter image description here

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

如果我没有指定一个显示：inline-block：内容在HTML元素中内嵌插入后，但不会出现在SVG中。

CSS：

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

截图：

enter image description here

第二个问题：是有办法的内联伪元素添加到SVG文本元素？应用时支持哪些其他显示模式：元素到SVG元素之后？

来源

2013-02-18 HappyTorso

我不认为SVG支持'：after'和'：before'伪元素。我很惊讶他们甚至出现，虽然我找不到任何证明他们不支持的参考。希望有更多知识的人会加入。 – Duopixel 2013-02-18 14:35:58

它们没有在SVG规范中定义，也不受Firefox的支持。 – 2013-02-18 14:43:14

他们没有定义的事实是否意味着应用它们会导致意外的行为？ – HappyTorso 2013-02-18 14:48:13

与Duopixel一样，SVG不支持应用于svg元素的CSS元素:before或:after伪元素。 SVG在将来可能会允许这样做，但是它应该如何工作还没有定义。

来源

2013-02-21 15:08:13

查看除Chrome以外的其他浏览器中可能出现的其他副作用可能很有趣（或不）。 – HappyTorso 2013-02-22 15:51:53

意外重复：在分配给SVG：文本的伪元素之后。使用伪元素和SVG

回答

相关问题