[已解决]SVG group问题

tanjiechen95

求助大佬们一个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

1. 在 SVG 中，如果有多个元素具有相同的 ID，则只有第一个元素被选择器或其他元素引用。因此，在您的示例中，由于存在两个具有相同 ID 的 <g> 元素，只有第一个元素（即 group2 所在的 group1）会被默认引用。
   
2. 
   
3. 为了解决这个问题，您可以使用其他选择器来引用第二个具有相同 ID 的 <g> 元素（即 group2 所在的 group3）。例如，您可以使用以下代码来引用 group2 所在的 group3：
   
4. 
   
5. <svg>
   
6.   <defs>
   
7.     <g id="group1">
   
8.       <g id="group2">
   
9.         <!-- ... -->
   
10.       </g>
    
11.     </g>
    
12.     <g id="group3">
    
13.       <g id="group2">
    
14.         <!-- ... -->
    
15.       </g>
    
16.     </g>
    
17.   </defs>
    
18.   <use x="0" y="0" xlink:href="#group3 > #group2" />
    
19. </svg>
    
20. 在上面的代码中，我们使用 CSS 选择器 #group3 > #group2 来引用 group2 所在的 group3，而不是默认引用 group2 所在的 group1。这样，您就可以在不更改子组 ID 的情况下，使用在 group3 中的 group2 了。

复制代码

跳转到最佳答案楼层

不二猫猫

1. 在 SVG 中，如果有多个元素具有相同的 ID，则只有第一个元素被选择器或其他元素引用。因此，在您的示例中，由于存在两个具有相同 ID 的 <g> 元素，只有第一个元素（即 group2 所在的 group1）会被默认引用。
   
2. 
   
3. 为了解决这个问题，您可以使用其他选择器来引用第二个具有相同 ID 的 <g> 元素（即 group2 所在的 group3）。例如，您可以使用以下代码来引用 group2 所在的 group3：
   
4. 
   
5. <svg>
   
6.   <defs>
   
7.     <g id="group1">
   
8.       <g id="group2">
   
9.         <!-- ... -->
   
10.       </g>
    
11.     </g>
    
12.     <g id="group3">
    
13.       <g id="group2">
    
14.         <!-- ... -->
    
15.       </g>
    
16.     </g>
    
17.   </defs>
    
18.   <use x="0" y="0" xlink:href="#group3 > #group2" />
    
19. </svg>
    
20. 在上面的代码中，我们使用 CSS 选择器 #group3 > #group2 来引用 group2 所在的 group3，而不是默认引用 group2 所在的 group1。这样，您就可以在不更改子组 ID 的情况下，使用在 group3 中的 group2 了。

复制代码