0

我需要实现的概念是瞬间突出各种元素。通过突出显示，我的意思是改变某些方面，例如颜色。

我在g（组）元素中有几个SVG 元素。这些内部元素中的每一个都有自己想要保留的 css 样式（颜色、边框等）。我想突出显示特定事件的整体元素组，然后将其恢复到原始状态。

我可以通过存储它们的原始状态，对它们中的每一个应用一些样式更改，然后从原始状态恢复来实现上述目的，但这似乎并不那么直接和优雅。

我在想的是有一些过滤选项可以应用于g容器元素。这将允许应用过滤器，然后将其删除，所有内部元素将恢复正常。

我拥有的元素示例：

<g>
     <rect x="0" y="0" rx="5" width="100" height="60" style="stroke: green; stroke-width: 2; fill: yellow;">
     <rect x="20" y="20" rx="5" width="10" height="10" style="stroke: green; stroke-width: 2; fill: yellow;">
</g>
4

1 回答 1

3

我建议为此使用 CSS。您可以删除style属性并引入一些合理的类/ID（我没有在这个快速示例中添加类）：

<svg>
  <style type="text/css">
    g:hover rect:first-child {
      fill:red; stroke:blue;
    }

    g:hover rect {
      fill:green;
    }

    rect {
      stroke: green; 
      stroke-width: 2; 
      fill: yellow;
    }

  </style>
  <g>
    <rect x="0" y="0" rx="5" width="100" height="60"/>
    <rect x="20" y="20" rx="5" width="10" height="10"/>
  </g>
</svg>

试试 jsFiddle

于 2013-04-12T15:43:41.773 回答