Изменение мелких элементов (SVG) в основном изображении SVG

Question

Я хочу спросить вас об изменении элементов SVG в основной элемент SVG.

Предположим, что черный квадрат является основным элементом SVG.Я хочу изменить элемент 1,2 и 3 на другой элемент SVG.Мне нужно сделать это с помощью кода JS, но я не знаю, как подготовить SVG-изображение для этого действия.Когда я просто изменяю путь элемента в теге SVG, измененный элемент не находится в хорошем месте на главном изображении SVG.

Что мне нужно знать о SVG и изменении пути элементов SVG для достижения желаемого результата?Потому что копирование пути из нового изображения SVG, просто в основное изображение SVG как элемент, не работает хорошо

Возможно, самый простой способ понять это, это настроить обувь.На главном SVG у меня есть изображение обуви с необработанными элементами обуви (TONGUE и HEEL).У меня есть 5 разных языков и каблуки.Когда я нажимаю на TONGUE, я хочу выбрать один из пяти ЯЗЫКОВ (то же самое с HEEL).Когда я выбираю новый TONGUE для обуви, основное изображение SVG должно изменить TONGUE на новый выбранный TONGUE (то же самое с HEEL).

Я думаю, что мне нужно изменить путь элемента, чтобы изменить изображение, но я незнать, если это правильный путь

Заранее спасибо,

С наилучшими пожеланиями.

Answer 1

Так что мне нужно создать основное изображение со всеми возможными символами?Согласно моему загружаемому изображению, если у меня будет 5 различных символов NUMBER 1, 5 различных символов NUMBER 2 ... мне нужно создать основное изображение с 10 символами и просто изменить их, когда мне нужно?

Например:

<svg id="demo" viewBox = "0 0 100 100"> 
  <symbol id="1-section1" 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="2-section1" 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="3-section1" 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="4-section1" 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="5-section1" 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="1-section2" 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>

  <symbol id="2-section2" 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>

  <symbol id="3-section2" 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>

  <symbol id="4-section2" 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>

  <symbol id="5-section2" 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="number1" xlink:href="#1-section1" x="35"  y="35" width="30" height="30"/>
  <use id="number2" xlink:href="#1-section2" x="300"  y="300" width="30" height="30"/>
</svg>

И с помощью этого кода я могу изменить два элемента на одном изображении, это правда?

Не могли бы вы также рассказать мне, как мне нужносоздать этот SVG-образ, по которому можно будет выполнить действие, описанное выше?

Заранее спасибо!

Answer 2

Я бы использовал <symbol> s с тем же 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>