SVG USE元素和:hover样式

我试图使用CSS :hover伪类从<defs> <use>标签样式embedded从<defs>embedded的SVG元素,但它似乎不工作: – /这里是我的代码:

 <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/> <style type="text/css" media="screen"> .active { fill: #0BE; } .active:hover { opacity: 0.8; stroke: #F0F; stroke-width: 4px; } .active2 #p2 { fill: #0BE; } .active2:hover #p2 { opacity: 0.8; stroke: #F0F; stroke-width: 4px; } #p2:hover { opacity: 0.8; stroke: #F0F; stroke-width: 4px; } </style> </head> <body> <svg version="1.1" width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <polygon id="p0" points="100,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6" class="active"/> <g id="gr1"> <polygon id="p1" points="130,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6"/> <polygon id="p2" points="100,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6" class="active"/> </g> </defs> <g transform="translate(70,100)"> <use xlink:href="#p0" transform="translate(40,0)"/> <use xlink:href="#p0" transform="translate(250,0)"/> <use xlink:href="#p0" transform="translate(460,0)" class="active" /> </g> <g transform="translate(100,300)"> <polygon id="style" points="110,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6" class="foo"/> <use xlink:href="#gr1" transform="translate( 350,2)" class="active2"/> </g> </svg> </body> </html> 

我希望它以一种方式工作,当用户将鼠标指针放在embedded的元素上时,其类内部元素“active”将改变其样式。 当我从<defs>直接embedded一个形状,并将CSS类应用到embedded它的<use> ,它起作用。 但是它不适用于通过<use>embedded的组中的任何类或ID。

如何解决它?

或者也许有更好的方法来做到这一点?

我只需要改变embedded对象内部的这个特定部分,而不是整个组。 这是因为这个群体的不同部分应用了不同的风格,而且鼠标盘旋时需要改变。

编辑:我想要什么

我想要的是将一个“库对象”从<defs>embedded到我的SVG文档的许多不同位置的方法。 此对象的某些部分需要使用CSS中的自定义颜色进行样式设置,因为我需要轻松自定义这些颜色而无需更改库对象的代码。

然后,当鼠标指针位于这个“活动”对象的上方时,需要通过不同的方式来指示用户的信号:当鼠标指针位于其上时,一些明亮的轮廓线显示可点击区域的形状。

不幸的是,我不能将样式应用到<use>元素的子元素,因为它们不是DOM中的<use>子元素(就像其他人已经提到的那样)。 我可以将一些样式应用于<defs>部分中的元素,因为它们在DOM中,而且它们可以用CSSselect器来寻址,但是它们不能被徘徊,因为它们是不可见的,所以应用:hover伪类别不起作用。 而且,如果这个类被应用到<use> ,它也不起作用,因为那样我就不能子select正确的子元素(它们不是<use>子元素)。 所以我没有任何钩子应用这些:hover伪类。

也许还有一些解决我的问题?

您无法寻址通过使用引用的元素。 规格说:

对于支持CSS样式的用户代理,将被引用元素概念深度克隆到非暴露的DOM树中,也会复制所引用元素及其内容的CSS级联([CSS2],第6章)所产生的任何属性值。 CSS2select器可以应用于原始(即引用)的元素,因为它们是正式文档结构的一部分。 CSS2select器不能应用于(概念上)克隆的DOM树,因为它的内容不是正式文档结构的一部分。

不过,Firefox支持通过使用虫洞来解决“虚拟”元素。 所有其他浏览器不。

更多的浏览器支持的是改变填充或抚摸颜色,如果你给被引用的元素currentColor的填充/描边值,然后你改变hover的<use>元素的color属性。 像这样:

 <svg version="1.1" width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <style type="text/css"> #p0 {fill:currentColor} #use1:hover {color:green} #use2:hover {color:red} #use3:hover {color:blue} </style> <defs> <polygon id="p0" points="100,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6" class="active" /> </defs> <g transform="translate(70,100)"> <use xlink:href="#p0" transform="translate(40,0)" id="use1" /> <use xlink:href="#p0" transform="translate(250,0)" id="use2" /> <use xlink:href="#p0" transform="translate(460,0)" id="use3" /> </g> </svg> 

这似乎是根据规范:

对于支持CSS样式的用户代理,将被引用元素概念深度克隆到非暴露的DOM树中,也会复制所引用元素及其内容的CSS级联([CSS2],第6章)所产生的任何属性值。 CSS2select器可以应用于原始(即引用)的元素,因为它们是正式文档结构的一部分。 CSS2select器不能应用于(概念上)克隆的DOM树,因为它的内容不是正式文档结构的一部分。

我尝试了几个使用方法:hover和/或[]属性select器的语法,并没有运气,但可能有一个解决scheme。

也许这可以帮助: http : //codepen.io/AmeliaBR/thoughts/customizable-svg-icons-css-variables

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" class="raw"> <g id="palette"> <path d="M5,90 C5,45 40,-5 75,10 C110,25 80,95 60,95 C50,95 50,75 30,75 C20,75 17,95 12,95 C10,95 5,95 5,90 Z"/> <g style="fill:currentColor;"> <path d="M30,50 c-10,0 -20,20 -5,15 s15,-15 5,-15z "/> <path d="M45,30 c-10,0 -15,15 -5,15 s10,-15 5,-15z "/> <path d="M70,20 c-10,0 -20,15 -5,15 s10,-15 5,-15z "/> <path d="M75,45 c-10,0 -20,15 -5,15 s15,-15 5,-15z "/> <path d="M65,65 c-10,0 -15,25 -5,20 s10,-20 5,-20z"/> </g> </g> </svg> <svg class="icon-style-A"> <use xlink:href="#palette"/> </svg> <svg class="icon-style-B"> <use xlink:href="#palette"/> </svg> <svg class="icon-style-C"> <use xlink:href="#palette"/> </svg> svg { display:inline-block; height:100px; width:100px; margin:10px; border:1px solid; background:#eee; } svg.raw { /* Default styles for the initial SVG. * Because they are defined on the <svg>, * not the individual graphics elements, * they will NOT be inherited by the <use> references. */ fill:rgba(255,250,220,0.4); stroke: rgba(0,0,0,0.7); stroke-width:2; } svg.icon-style-A { /* Set the fill, stroke, and color properties to be inherited by the <use> element: */ fill:burlywood; color:blueviolet; stroke:#222; stroke-width:0.5px; } svg.icon-style-B { /* Set the color properties: */ fill:blanchedalmond; color:lavender; stroke:white; stroke-width:1px; /* set some icon styles on the <svg> itself: */ background:aliceblue; border-radius:20%; border:none; box-shadow:royalblue 0 0 2px; } svg.icon-style-C { /* Set the color properties: */ fill:beige; color:green; stroke:#aaa; stroke-width:1.5px; /* icon styles for the <svg> itself: */ background:#222; border-radius:10%; border:solid gray; } 

不是很灵活,但它为我的项目工作。