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; }
不是很灵活，但它为我的项目工作。
