Question

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

我在 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>

Answer 1

我建议使用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>

Try on jsFiddle

如何突出显示组内部SVG元素（g）

1 个答案: