tanjiechen95 发表于 2023-1-5 18:02:32

SVG group问题

求助大佬们一个SVG group的问题,假设下面的svg:
<svg>
<def>
<g id="group1">
<g id="group2">
.....
</g>
</g>
<g id="group3">
<g id="group2">
.......
</g>
</g>
</def>
<use x="0" y="0" xlink:href="#group2" />

我知道这种情况会默认使用group1中的group2,
请问一下有没有办法让我使用在group3中的group2呢?(不更改子组的id)

不二猫猫 发表于 2023-3-25 16:27:12

在 SVG 中,如果有多个元素具有相同的 ID,则只有第一个元素被选择器或其他元素引用。因此,在您的示例中,由于存在两个具有相同 ID 的 <g> 元素,只有第一个元素(即 group2 所在的 group1)会被默认引用。

为了解决这个问题,您可以使用其他选择器来引用第二个具有相同 ID 的 <g> 元素(即 group2 所在的 group3)。例如,您可以使用以下代码来引用 group2 所在的 group3:

<svg>
<defs>
    <g id="group1">
      <g id="group2">
      <!-- ... -->
      </g>
    </g>
    <g id="group3">
      <g id="group2">
      <!-- ... -->
      </g>
    </g>
</defs>
<use x="0" y="0" xlink:href="#group3 > #group2" />
</svg>
在上面的代码中,我们使用 CSS 选择器 #group3 > #group2 来引用 group2 所在的 group3,而不是默认引用 group2 所在的 group1。这样,您就可以在不更改子组 ID 的情况下,使用在 group3 中的 group2 了。
页: [1]
查看完整版本: SVG group问题