Как объеденить два path в SVG?

Question

[uRoot]

Есть такой SVG (песочница)


Как объединить два path, чтобы Киев и Киевская область были одним регионом?

Comments

[Rustam Bainazarov]

Откройте этот SVG в Inkscape или любом редакторе нормальном. Там вы сможете объединить два path спокойно.

На примере оного:
https://youtu.be/jxhR9aT6crU

[Adamos]

Вообще-то в любом блокноте:

<g>
  <path />
  <path />
</g>

[Brad9aga]

Рустам Байназаров, я решил куда еще проще

[Rustam Bainazarov]

Brad9aga, это как? Если объединять в g, как пишет Adamos, делать вложенный path или делать на классах — да, это решения, но они усложняют структуру.

На мой взгляд, проще path объединить за пару секунд и получить возможность сжать доп. код через SVGO + простую и однородную внутреннюю структуру с одинаковой вложенностью в данном случае.

[Brad9aga]

Рустам Байназаров, посомтри мой ответ

[Brad9aga]

Рустам Байназаров, я просто сунул 2 патча под одну ссылку

[Brad9aga]

Рустам Байназаров, что собсна ему и требовалось походу,лол

[Adamos]

Рустам Байназаров, если ТС всего лишь надо, чтобы при наведении на Киев выделялась Киевская область - достаточно положить путь области выше по z-координате, чем путь города. Мышка до него и не достанет ;)

[uRoot]

Adamos,

чтобы при наведении на Киев выделялась Киевская область

Наоборот :) Наводим на Киевскую область, а выделяется и Киев, и Киевская область. Ну ещё кое-что по мелочам. В общем, вот так должно быть: https://codepen.io/CryNet/pen/RXQzge
Порешал проблему в Inkscape.

выше по z-координате

z-index?

[Adamos]

CryNet, просто при банальном графическом объединении двух замкнутых контуров вы получаете больший контур, из которого вырезан меньший.
В вашем примере вижу карту, из которой меньший контур (Киев) просто выкинут.

[uRoot]

Adamos, мне так подходит. Я в Inkscape объединил два path и брал контур

Answer 1

[Brad9aga]

https://jsfiddle.net/24ftqux3/1/