javascript - 更改主 SVG 图像中的小元素 (SVG)

Question

我想问你关于将 SVG 元素更改为 SVG 主元素的问题。

假设黑色方 block 是主要的 SVG 元素。我想将元素 1,2 和 3 更改为不同的 SVG 元素。我需要通过 JS 代码来执行此操作，但我不知道如何为此操作准备 SVG 图像。当我简单地更改 SVG 标记中元素的路径时，更改的元素在主 SVG 图像上的位置不佳。

我需要了解有关 SVG 和更改 SVG 元素路径以获得所需结果的哪些信息？因为，将路径从新的 SVG 图像复制到主 SVG 图像作为元素效果不佳

也许最简单的理解方式就是鞋子定制。在主 SVG 上，我有一张带有鞋子原始元素(鞋舌和鞋跟)的鞋子图片。我有 5 种不同的舌头和高跟鞋。当我点击 shoe TONGUE 时，我希望能够选择五个 TONGUES 之一(与 HEEL 相同)。当我为鞋子选择新的 TONGUE 时，主要 SVG 图像需要将 TONGUE 更改为新选择的 TONGUE(与 HEEL 相同)。

我认为我需要更改元素路径来更改图像，但我不知道这是否是正确的方法

提前致谢

最好的问候。

Answer 1

我会使用 <symbol>与viewBox相同或至少相同的比率。你可以<use>这些符号和 x , y , width和 height对于同一个地点总是一样的。

接下来是一个示例，我在点击时动态更改图标。

const SVG_XLINK = "http://www.w3.org/1999/xlink";


demo.addEventListener("click",()=>{
  let actual = volume.getAttribute('xlink:href');
  if(actual == "#volume_up"){
    volume.setAttributeNS(SVG_XLINK, 'xlink:href', '#volume_off');
  }else{volume.setAttributeNS(SVG_XLINK, 'xlink:href', '#volume_up');}
})

svg{border:1px solid;width:90vh}

<svg id="demo" viewBox = "0 0 100 100"> 
<symbol id="volume_up" viewBox='0 0 24 24'>
  <title>volume up</title>
  <path d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'></path>

</symbol>
<symbol id="volume_off" viewBox='0 0 24 24'><title>volume off</title>
    <path d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'></path>
</symbol>
  
  <use id="volume" xlink:href="#volume_off" x="35"  y="35" width="30" height="30"/>
</svg>