css – SVG USE元素和：悬停样式

我试图使用CSS：hover伪类来设计从< defs>嵌入的SVG元素。由< use>标签，但它似乎不起作用： – /这是我的代码：

<!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,-86.6"/>
      <polygon id="p2" points="100,-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,-86.6" class="foo"/>
    <use xlink:href="#gr1" transform="translate( 350,2)" class="active2"/>
 </g>

</svg>

</body>
</html>

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

如何解决？

还是有更好的方法呢？

当用户将其悬停，而不是整个组时，我只需要更改嵌入对象内的这个特定部分。这是因为这个组的不同部分将应用不同的样式，并且当鼠标悬停时，它们需要改变不同。

编辑：我想要什么

我想要得到的是从< defs>中嵌入一个“库对象”的方式进入我的SVG文档的许多不同的地方。该对象的某些部分需要使用CSS中的自定义颜色进行样式化，因为我不需要更改库对象的代码即可轻松定制这些颜色。

然后，当鼠标指针位于这样的“活动”对象之上时，我需要通过对其部件进行不同的设置来向用户发出信号：一些明亮的轮廓在这里和那里显示鼠标指针在其上的可点击区域的形状。

不幸的是，我不能将样式应用于< use>元素的子元素，因为它们不是< use>的子元素。在DOM(如其他人已经提到)。我可以将一些样式应用于< defs>内的元素部分，因为它们在DOM中，并且它们可以通过CSS选择器寻址，但是它们不能被悬停，因为它们是不可见的，所以应用：将悬浮虚拟类放置到它们不起作用。而且，如果将此类应用于< use>，那么它不起作用，因为我不能子选择适当的子元素(它们不是< use>的子元素)。所以我没有任何钩子来应用它们：悬浮伪类。

也许还有一些解决我的问题的方法？

解决方法

您不能通过使用来解决引用的元素。 The specs说：

For user agents that support Styling with CSS,the conceptual deep cloning of the referenced element into a non-exposed DOM tree also copies any property values resulting from the CSS cascade ([CSS2],chapter 6) on the referenced element and its contents. CSS2 selectors can be applied to the original (i.e.,referenced) elements because they are part of the formal document structure. CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.

然而，Firefox支持通过使用虫洞来处理“虚拟”元素。所有其他浏览器都没有。

如果您将引用的元素赋给currentColor的填充/笔画值，然后更改< use>的颜色属性，则更多浏览器支持更改填充或绘制颜色。悬停元素。像这样：

<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,-86.6" class="active" />
  </defs>

  <g transform="translate(70,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>

所有主流浏览器(FF，Chrome，IE，Safari)均支持此功能。只有歌剧似乎不喜欢。这个缺点当然是用这种方法你只能改变一种颜色。

所以，不同的方法可能是使用过滤器，如果它只是关于改变颜色。例如使用< feColorMatrix>，您可以使用颜色矩阵将一种颜色转换为另一种颜色，如下所示：

<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 {filter: url(#filter1)}
    #use2:hover {filter: url(#filter2)}
    #use3:hover {filter: url(#filter3)}
  </style>

  <defs>
    <g id="p0">
      <polygon points="100,-86.6" fill="red" />
      <rect width="50" height="70" fill="green" />
      <circle cx="-20" cy="-30" r="30" fill="blue" />
    </g>
  </defs>

  <filter id="filter1">
    <feColorMatrix type="matrix" in="SourceGraphic" values="0 1 0 0 0 
                     1 0 0 0 0 
                     0 0 1 0 0 
                     0 0 0 1 0" />
  </filter>
  <filter id="filter2">
    <feColorMatrix type="matrix" in="SourceGraphic" values="0 0 1 0 0 
                     1 0 0 0 0 
                     0 1 0 0 0 
                     0 0 0 1 0" />
  </filter>
  <filter id="filter3">
    <feColorMatrix type="matrix" in="SourceGraphic" values="0 1 0 0 0 
                     0 0 1 0 0 
                     1 0 0 0 0 
                     0 0 0 1 0" />
  </filter>

  <g transform="translate(70,0)" id="use3" />
  </g>
</svg>

尽管如此，Opera仍然没有运气，这一次我对IE9和Safari也不满意。但是我相信Opera和Safari应该是可能的，只有我做了100％不正确的事情。

css – SVG USE元素和：悬停样式

解决方法

猜你在找的CSS相关文章