這是一個由兩部分組成的問題,請參見下文。意外重複:在分配給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;
}
的意想不到的結果是%符號出現兩次:在所述包裝元素的最左邊邊緣一次,一旦它被認爲是定位。
第一個問題:爲什麼會這樣?
如果我沒有指定一個顯示:inline-block:內容在HTML元素中內嵌插入後,但不會出現在SVG中。
CSS:
.percentage1:after {
content:"%";
font-size:0.7em;
}
截圖:
第二個問題:是有辦法的內聯僞元素添加到SVG文本元素?應用時支持哪些其他顯示模式:元素到SVG元素之後?
我不認爲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