[英]Unexpected duplication of :after pseudo element assigned to SVG:text. Working with pseudo elements and SVG
This is a two-part question, see below. 这是一个分为两部分的问题,请参见下文。
While trying to add a % symbol via CSS to an instance of SVG text using the :after pseudo-element I ran into this problem ( JsFiddle provided). 在尝试使用:after伪元素通过CSS向SVG文本实例添加%符号时,我遇到了这个问题(提供了JsFiddle )。 I am on Chrome Version 24.0.1312.57.
我使用的是Chrome版本24.0.1312.57。
HTML: 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: CSS:
.wrapper {
width: 300px;
height:80px;
overflow:hidden;
}
.percentage2:after {
content:"%";
display: inline-block;
font-size: 0.7em;
position:relative;
left:100px;
}
The unexpected result is that the % symbol appears twice: once at the leftmost edge of the wrapper element and once where it was supposed to be positioned. 意外的结果是%符号出现了两次:一次出现在包装元素的最左边,一次出现在应该放置的位置。
First question : why is this happening? 第一个问题 :为什么会这样?
If I do not specify a display:inline-block the :after content is inserted as inline in the HTML elements, but does not appear in the SVG. 如果未指定display:inline-block,则:after内容将作为内联插入HTML元素中,但不会出现在SVG中。
CSS: CSS:
.percentage1:after {
content:"%";
font-size:0.7em;
}
SCREENSHOT: 屏幕截图:
Second question : is there a way to add inline pseudo elements to an SVG text element? 第二个问题 :是否可以将内嵌伪元素添加到SVG文本元素中? What other display modes are supported when applying :after elements to SVG elements?
将:after元素应用于SVG元素时,还支持哪些其他显示模式?
Like Duopixel wrote, SVG doesn't support CSS :before
or :after
pseudo-elements applied to svg elements. 就像Duopixel所写的那样,SVG不支持将CSS
:before
或:after
伪元素应用于svg元素。 SVG might allow this in the future, but how that should work is still not defined. SVG将来可能会允许这样做,但是仍未确定该如何工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.