SVG的CSS选择器< use>后代 - IE解决方法想 [英] CSS selector for SVG <use> descendants - IE workaround wanted
问题描述
我的内置SVG模拟了一个三位数的七段（ en.wikipedia.org/wiki/Seven-segment_display ）LED指示灯。由于可重复使用的段组，我将这些七次编码一次，并由< use> 元素放置三次。由于重复的字符，我使用CSS选择器编码每个字符模式一次，打开相应的段。 这应该是什么样子
显然，它在IE中不起作用，至少在写这个时候。据我所知，IE不能处理SVG元素内的后代的CSS选择器。 EDIT ：此处也提到： css-tricks.com/gotchas-on-getting-svg-into-production / ， svg.parent路径。孩子{/ *不会工作！ * /}
除了蛮力克隆而不是< use> ？我试图用ids替换类，没有成功。我正在寻找没有JavaScript的解决方案。
各个多边形只有自己的类，例如 .a7 ，这就是为什么我必须知道其父以便应用填充颜色。有没有办法让浏览器将父类的类添加到元素的类中，例如< polygon class =WhatEverClassMyParentHas a7points =。。/> ？
< html>< head>< / head>< body& < svg xmlns =http://www.w3.org/2000/svgversion =1.1width =200pxviewBox = - 1 -1 36 20> < style type =text / css> * [CDATA [.O.a7,.O.b7,.O.c7,.O.d7,.O.e7,.O.f7,.a.a7,.c.e7,.f.f7 ，.F.g7 {fill：red; }]]> < / style> < defs> < g id =dig7fill =grey> < polygon class =a7points =1，1 2，0 8，0 9，1 8，2 2，2/> < polygon class =b7points =9，110，2 10，8 9，9 8，8 8，2/> < polygon class =c7points =9,9 10,10 10,16 9,17 8,16 8,10/> < polygon class =d7points =9,17 8,18 2,18 1,17 2,16 8,16/> < polygon class =e7points =1,17 0,16 0,10 1，9 2,10 2,16/> < polygon class =f7points =1,9 0，8 0，2 1，1 2，2 2，8/> < polygon class =g7points =1,92,88,89,98,10 2,10/> < / g> < / defs> < rect x = - 1y = - 1width =100％height =100％fill =black/> < use id =x100class =Oxlink：href =＃dig7/> < use id =x10class =Fxlink：href =＃dig7transform =translate（12,0）/> < use id =x1class =Fxlink：href =＃dig7transform =translate（24,0）/> < / svg> < p>此三位数七段LED指示灯应显示OFF字样。分段由CSS选择器打开。< / p>< / body>< / html>
< html>
< head>
< / head>
< body>
< svg>
< defs>
< g id =dig7fill =grey>
< polygon class =a7style =fill：var（ - primary-color，＃1E8F90）points =1，1 2，0 8，0 9，1 8，2 2，2 />
< polygon class =b7points =9，110，2 10，8 9，9 8，8 8，2/>
< polygon class =c7points =9，9 10,10 10,16 9,17 8,16 8,10/>
< polygon class =d7points =9,17 8,18 2,18 1,17 2,16 8,16/>
< polygon class =e7style =fill：var（ - primary-color，＃1E8F90）points =1,17 0,16 0,10 1，9 2,10 2,16 />
< polygon class =f7style =fill：var（ - primary-color，＃1E8F90）points =1,90,8 0,2 1，1 2，2 2，8 />
< polygon class =g7style =fill：var（ - primary-color，＃1E8F90）points =1,92,88,89,98,10 2,10 />
< / g>
< g id =dig8fill =grey>
< polygon class =a7style =fill：var（ - primary-color，＃1E8F90）points =1，1 2，0 8，0 9，1 8，2 2，2 />
< polygon class =b7points =9，110，2 10，8 9，9 8，8 8，2/>
< polygon class =c7points =9，9 10,10 10,16 9,17 8,16 8,10/>
< polygon class =d7points =9,17 8,18 2,18 1,17 2,16 8,16/>
< polygon class =e7style =fill：var（ - primary-color，＃1E8F90）points =1,17 0,16 0,10 1，9 2,10 2,16 />
< polygon class =f7style =fill：var（ - primary-color，＃1E8F90）points =1,90,8 0,2 1，1 2，2 2，8 />
< polygon class =g7style =fill：var（ - primary-color，＃1E8F90）points =1,92,88,89,98,10 2,10 />
< / g>
< / defs>
< / svg> < svg xmlns =http://www.w3.org/2000/svgversion =1.1width =200pxviewBox = - 1 -1 36 20>
< style type =text / css>
.O .a7，
.O .b7，
.O .c7，
.O .d7，
.O .e7，
.O .f7，
.F.a7，
.F.e7，
.F.f7，
.F .g7
{
fill：red;
}
]]>
＃x100 {
--primary-color：＃0099CC;
--secondary-color：＃FFDF34;
--tertiary-color：＃333;
}
< / style>
< rect x = - 1y = - 1width =100％height =100％fill =black/>
< use id =x100class =Oxlink：href =＃dig7/>
< use id =x10class =Fxlink：href =＃dig7transform =translate（12,0）/>
< use id =x1class =Fxlink：href =＃dig7transform =translate（24,0）/>
< / svg>
< p>此三位数七段LED指示灯应显示OFF字样。细分受CSS选择器启用。< / p>
< / body>
< / html>
My inline SVG mimics a three-digit seven-segment (en.wikipedia.org/wiki/Seven-segment_display) LED indicator. Due to reusable groups of segments I coded these seven once and placed it by <use> element three times. Due to repeating characters, I encoded each character pattern once with CSS selectors, turning on respective segments. This is how it should look like
Apparently, it doesn't work in IE, at least at time of writing this. As far as I understood it, IE can't handle CSS selectors of descendants within SVG elements. EDIT: also mentioned here: css-tricks.com/gotchas-on-getting-svg-into-production/, svg.parent path.child { /* won't work! */ }
Any ideas of a workaround other than brute force cloning instead of <use>? I tried replacing classes with ids, without success. I'm looking for a solution without JavaScript.
The individual polygons only have their own classes, like .a7, this is why I have to know its parent in order to apply the fill color. Is there a way to let browser prepend parent's class to element's class, like <polygon class="WhatEverClassMyParentHas a7" points=". . ."/>?
<html>
<head></head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" viewBox="-1 -1 36 20">
<style type="text/css">
<![CDATA[
.O .a7,
.O .b7,
.O .c7,
.O .d7,
.O .e7,
.O .f7,
.F .a7,
.F .e7,
.F .f7,
.F .g7
{
fill: red;
}
]]>
</style>
<defs>
<g id="dig7" fill="grey">
<polygon class="a7" points=" 1, 1 2, 0 8, 0 9, 1 8, 2 2, 2" />
<polygon class="b7" points=" 9, 1 10, 2 10, 8 9, 9 8, 8 8, 2" />
<polygon class="c7" points=" 9, 9 10,10 10,16 9,17 8,16 8,10" />
<polygon class="d7" points=" 9,17 8,18 2,18 1,17 2,16 8,16" />
<polygon class="e7" points=" 1,17 0,16 0,10 1, 9 2,10 2,16" />
<polygon class="f7" points=" 1, 9 0, 8 0, 2 1, 1 2, 2 2, 8" />
<polygon class="g7" points=" 1, 9 2, 8 8, 8 9, 9 8,10 2,10" />
</g>
</defs>
<rect x="-1" y="-1" width="100%" height="100%" fill="black" />
<use id="x100" class="O" xlink:href="#dig7" />
<use id="x10" class="F" xlink:href="#dig7" transform="translate(12,0)" />
<use id="x1" class="F" xlink:href="#dig7" transform="translate(24,0)" />
</svg>
<p>This three-digit seven-segment LED indicator should display the word OFF. Segments are turned on by CSS selectors.</p>
</body>
</html>
<html>
<head>
</head>
<body>
<svg>
<defs>
<g id="dig7" fill="grey">
<polygon class="a7" style="fill: var(--primary-color, #1E8F90)" points=" 1, 1 2, 0 8, 0 9, 1 8, 2 2, 2" />
<polygon class="b7" points=" 9, 1 10, 2 10, 8 9, 9 8, 8 8, 2" />
<polygon class="c7" points=" 9, 9 10,10 10,16 9,17 8,16 8,10" />
<polygon class="d7" points=" 9,17 8,18 2,18 1,17 2,16 8,16" />
<polygon class="e7" style="fill: var(--primary-color, #1E8F90)" points=" 1,17 0,16 0,10 1, 9 2,10 2,16" />
<polygon class="f7" style="fill: var(--primary-color, #1E8F90)" points=" 1, 9 0, 8 0, 2 1, 1 2, 2 2, 8" />
<polygon class="g7" style="fill: var(--primary-color, #1E8F90)" points=" 1, 9 2, 8 8, 8 9, 9 8,10 2,10" />
</g>
<g id="dig8" fill="grey">
<polygon class="a7" style="fill: var(--primary-color, #1E8F90)" points=" 1, 1 2, 0 8, 0 9, 1 8, 2 2, 2" />
<polygon class="b7" points=" 9, 1 10, 2 10, 8 9, 9 8, 8 8, 2" />
<polygon class="c7" points=" 9, 9 10,10 10,16 9,17 8,16 8,10" />
<polygon class="d7" points=" 9,17 8,18 2,18 1,17 2,16 8,16" />
<polygon class="e7" style="fill: var(--primary-color, #1E8F90)" points=" 1,17 0,16 0,10 1, 9 2,10 2,16" />
<polygon class="f7" style="fill: var(--primary-color, #1E8F90)" points=" 1, 9 0, 8 0, 2 1, 1 2, 2 2, 8" />
<polygon class="g7" style="fill: var(--primary-color, #1E8F90)" points=" 1, 9 2, 8 8, 8 9, 9 8,10 2,10" />
</g>
</defs>
</svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" viewBox="-1 -1 36 20">
<style type="text/css">
.O .a7,
.O .b7,
.O .c7,
.O .d7,
.O .e7,
.O .f7,
.F .a7,
.F .e7,
.F .f7,
.F .g7
{
fill: red;
}
]]>
#x100 {
--primary-color: #0099CC;
--secondary-color: #FFDF34;
--tertiary-color: #333;
}
</style>
<rect x="-1" y="-1" width="100%" height="100%" fill="black" />
<use id="x100" class="O" xlink:href="#dig7" />
<use id="x10" class="F" xlink:href="#dig7" transform="translate(12,0)" />
<use id="x1" class="F" xlink:href="#dig7" transform="translate(24,0)" />
</svg>
<p>This three-digit seven-segment LED indicator should display the word OFF. Segments are turned on by CSS selectors.</p>
</body>
</html>
这篇关于SVG的CSS选择器< use>后代 - IE解决方法想的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![这应该是什么样子](\"https://i.stack.imgur.com/qng0J.png\"){kind=link}
