Блог

Главная - Вопросы по программированию - Позиционирование/объединение нескольких элементов SVG с помощью javascript

Позиционирование/объединение нескольких элементов SVG с помощью javascript

#javascript #css #svg

Вопрос:

Итак, вот моя проблема: у меня есть несколько объектов SVG, которые должны быть объединены определенным образом (с помощью javascript).

Пример:

Первый SVG : Первый svgВторой SVG : Второй svg

Желаемый результат :

Желаемый результат

Я попытался объединить svg,но,конечно,мне нужно изменить значения d и x1, y1, x2, y2 ..и т. Д. И я понятия не имею, как это сделать, чтобы получить желаемый результат.

Код SVG 1:

 <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 86.81 249.26"><path d="M25.17,225.77s11.2,10.6,39.4,5.2C64.47,231,43.87,220.67,25.17,225.77Z" style="fill:#b3b3b3;stroke:#231f20;stroke-miterlimit:10"/><path d="M41.37,8.27s-25.3,55.2-16.3,201.6c0,0,17-7.2,41.8,5.4l6-43.9L62.07,38.17S49.47,10.67,41.37,8.27Z" style="fill:#fff;stroke:#231f20;stroke-miterlimit:10"/><path d="M25.17,225.77l-.1-16a55.35,55.35,0,0,1,41.8,5.4l-2.4,15.7C64.47,231,48.27,221.77,25.17,225.77Z" style="fill:#fff;stroke:#231f20;stroke-miterlimit:10"/><circle id="LeftShoulder" cx="41.53" cy="8.27" r="1.4" style="fill:#f70000"/></svg>

Код svg 2:

 <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 209.87 268.08"><path d="M119.21,229v1.6l-8.8-1c-39.2.4-66.9-7.1-66.9-7.1.6-15.3,0-39.8,0-39.8A598.75,598.75,0,0,1,39.11,90c-15.5-31-20.4-28.5-20.4-28.5,20.1-19.9,48-27.1,48-27.1l33.9,8s2.8-.6,5.4,2.4l7.8-.2s-.2-2.6,4.3-2.6l33.8-8s27.9,7.3,48,27.1c0,0-4.9-2.5-20.4,28.5a598.51,598.51,0,0,1-4.4,92.7s-.6,24.5,0,39.8c0,0-23.2,8.5-55.8,7.6" style="fill:#fff;stroke:#231f20;stroke-miterlimit:10"/><polyline points="99.41 44.47 118.91 44.47 119.21 230.57" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><path d="M119.21,213.87c-53.1-.2-75.7-7.3-75.7-7.3" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><line x1="99.41" y1="213.87" x2="99.81" y2="44.47" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><path d="M68.11,37.77s-26.5,8.5-44.6,26.6" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><line x1="57.31" y1="106.67" x2="64.11" y2="210.27" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><line x1="84.91" y1="104.57" x2="81.11" y2="212.37" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><path d="M40,56.07s-.1,2-.3,5q-.15,2.25-.3,5.1c-.1,1.9-.2,3.9-.3,5.9s-.2,4-.2,5.9v5.1c0,.7.1,1.4.1,2s.1,1.1.1,1.6c.1.9.2,1.4.2,1.4a6.39,6.39,0,0,0-.2-1.4c-.1-.4-.2-1-.3-1.6s-.2-1.3-.3-2-.1-1.6-.2-2.4a24.37,24.37,0,0,1-.1-2.7c0-1.9,0-3.9.1-5.9s.2-4,.4-5.9.3-3.6.5-5.1C39.61,58.07,40,56.07,40,56.07Z" style="fill:#231f20"/><path d="M150.51,37.77s26.5,8.5,44.6,26.6" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><line x1="161.31" y1="106.67" x2="154.41" y2="210.27" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><line x1="133.61" y1="104.57" x2="137.41" y2="212.37" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><path d="M178.61,56.07s.3,2,.7,5c.2,1.5.4,3.2.5,5.1s.3,3.9.4,5.9.1,4,.1,5.9a23.48,23.48,0,0,1-.1,2.7,16.59,16.59,0,0,1-.2,2.4,10.58,10.58,0,0,1-.3,2c-.1.6-.2,1.1-.3,1.6-.2.9-.3,1.3-.3,1.3s.1-.5.2-1.4a7.59,7.59,0,0,0,.1-1.6,12.75,12.75,0,0,0,.1-2,43.24,43.24,0,0,0,0-5.1c0-1.9-.1-3.9-.2-5.9s-.2-4-.3-5.9-.2-3.6-.3-5.1C178.71,58.07,178.61,56.07,178.61,56.07Z" style="fill:#231f20"/><path d="M119.21,213.87s43.6-1.8,55.5-7.3" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><circle id="RightShoulder" cx="20.11" cy="61.47" r="1.4" style="fill:#f70000"/><circle id="LeftShoulder" cx="199.91" cy="61.22" r="1.4" style="fill:#f70000"/></svg>

И я, конечно, должен принять во внимание, что я могу объединить другие svg в разных других позициях, чтобы получить «полный объект».

Комментарии:

1. разве вы не пробовали относительные позиции? , Я имею в виду, что если цель состоит в том, чтобы показать объединенное изображение, вы можете использовать относительное позиционирование CSS.

2. На самом деле мне нужно объединить этот svg, чтобы затем показать его на холсте и сделать с ним больше вещей ! Я намерен использовать fabricJS в дополнение к этому.

Ответ №1:

Эти объекты были нарисованы с помощью разных окон просмотра в разных масштабах, поэтому их невозможно объединить программно — вам придется вручную рассчитать соответствующее преобразование масштаба/преобразования для каждого объекта, который вы хотите объединить. Вот первый из них.

 <svg width="800px" height="650px" xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 209.87 280">
  
<g transform="scale(.94 .94) translate(-21 57)">  
<path d="M25.17,225.77s11.2,10.6,39.4,5.2C64.47,231,43.87,220.67,25.17,225.77Z" style="fill:#b3b3b3;stroke:#231f20;stroke-miterlimit:10"/><path d="M41.37,8.27s-25.3,55.2-16.3,201.6c0,0,17-7.2,41.8,5.4l6-43.9L62.07,38.17S49.47,10.67,41.37,8.27Z" style="fill:#fff;stroke:#231f20;stroke-miterlimit:10"/><path d="M25.17,225.77l-.1-16a55.35,55.35,0,0,1,41.8,5.4l-2.4,15.7C64.47,231,48.27,221.77,25.17,225.77Z" style="fill:#fff;stroke:#231f20;stroke-miterlimit:10"/><circle id="LeftShoulder" cx="41.53" cy="8.27" r="1.4" style="fill:#f70000"/>
  
</g>

<path d="M119.21,229v1.6l-8.8-1c-39.2.4-66.9-7.1-66.9-7.1.6-15.3,0-39.8,0-39.8A598.75,598.75,0,0,1,39.11,90c-15.5-31-20.4-28.5-20.4-28.5,20.1-19.9,48-27.1,48-27.1l33.9,8s2.8-.6,5.4,2.4l7.8-.2s-.2-2.6,4.3-2.6l33.8-8s27.9,7.3,48,27.1c0,0-4.9-2.5-20.4,28.5a598.51,598.51,0,0,1-4.4,92.7s-.6,24.5,0,39.8c0,0-23.2,8.5-55.8,7.6" style="fill:#fff;stroke:#231f20;stroke-miterlimit:10"/><polyline points="99.41 44.47 118.91 44.47 119.21 230.57" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><path d="M119.21,213.87c-53.1-.2-75.7-7.3-75.7-7.3" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><line x1="99.41" y1="213.87" x2="99.81" y2="44.47" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><path d="M68.11,37.77s-26.5,8.5-44.6,26.6" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><line x1="57.31" y1="106.67" x2="64.11" y2="210.27" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><line x1="84.91" y1="104.57" x2="81.11" y2="212.37" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><path d="M40,56.07s-.1,2-.3,5q-.15,2.25-.3,5.1c-.1,1.9-.2,3.9-.3,5.9s-.2,4-.2,5.9v5.1c0,.7.1,1.4.1,2s.1,1.1.1,1.6c.1.9.2,1.4.2,1.4a6.39,6.39,0,0,0-.2-1.4c-.1-.4-.2-1-.3-1.6s-.2-1.3-.3-2-.1-1.6-.2-2.4a24.37,24.37,0,0,1-.1-2.7c0-1.9,0-3.9.1-5.9s.2-4,.4-5.9.3-3.6.5-5.1C39.61,58.07,40,56.07,40,56.07Z" style="fill:#231f20"/><path d="M150.51,37.77s26.5,8.5,44.6,26.6" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><line x1="161.31" y1="106.67" x2="154.41" y2="210.27" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><line x1="133.61" y1="104.57" x2="137.41" y2="212.37" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><path d="M178.61,56.07s.3,2,.7,5c.2,1.5.4,3.2.5,5.1s.3,3.9.4,5.9.1,4,.1,5.9a23.48,23.48,0,0,1-.1,2.7,16.59,16.59,0,0,1-.2,2.4,10.58,10.58,0,0,1-.3,2c-.1.6-.2,1.1-.3,1.6-.2.9-.3,1.3-.3,1.3s.1-.5.2-1.4a7.59,7.59,0,0,0,.1-1.6,12.75,12.75,0,0,0,.1-2,43.24,43.24,0,0,0,0-5.1c0-1.9-.1-3.9-.2-5.9s-.2-4-.3-5.9-.2-3.6-.3-5.1C178.71,58.07,178.61,56.07,178.61,56.07Z" style="fill:#231f20"/><path d="M119.21,213.87s43.6-1.8,55.5-7.3" style="fill:none;stroke:#231f20;stroke-miterlimit:10"/><circle id="RightShoulder" cx="20.11" cy="61.47" r="1.4" style="fill:#f70000"/><circle id="LeftShoulder" cx="199.91" cy="61.22" r="1.4" style="fill:#f70000"/>

</svg>
Метки: