意外重複：在分配給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

回答

相關問題