Как в SVG найти область обрамляемую путями

342

18 января 2018, 22:32

В SVG файле есть несколько путей path.

Мне нужно найти ту область, которая лежит между путей, обрамлена путями.

Это то, что получается в результате кнопки "Заливать замкнутые области" в Inkscape.

Возможно ли использовать библиотеки, предпочтительно SVG.js И её плагины.

Для чего мне это надо?

Хочу закрасить определённым образом, то что лежит внутри путей.

Пример: есть 4 пути.

Надо на JavaScript расщитать, найти область внутри.

Может можно и без её расчёта сделать, но нужно что-то сделать, что бы я смог раскрасить эту область на JavaScript.

Answer 1

Я не представляю, как можно объяснить плагину какой путь выбрать.
Если только с помощью утилиты, где есть пипетка, например ColorMania навести её на определенный участок, скопировать код цвета #D62728 и затем по этому параметру найти конкретный путь, который закрашен этим цветом. Но это слишком непродуктивно.

Я для себя выбрал другой, более короткий путь.

Допустим у нас есть svg файл средней сложности:

  <svg width="175" height="175" >  
 <defs> 
 <circle id="greenCircle" cx="13" cy="98"  r="10" fill="#B6FF00" />  
 </defs> 
  <g transform="translate(87.5,87.5)"> 
    <path fill="#1f77b4" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> 
    <path fill="#aec7e8" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> 
    <path fill="#ff7f0e" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> 
    <path fill="#ffbb78" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> 
    <path fill="#2ca02c" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> 
    <path fill="#98df8a" d="M5.357829746269671e-15,-87.5A87.5,87.5,0,0,1,83.21744517582593,-27.038987007807897L61.3431453010374,-19.93159613718411A64.5,64.5,0,0,0,3.949485927250214e-15,-64.5Z"></path> 
    <path fill="#d62728" d="M83.21744517582593,-27.038987007807897A87.5,87.5,0,0,1,51.4312095755914,70.7889870078079L37.91214877286452,52.18159613718411A64.5,64.5,0,0,0,61.3431453010374,-19.93159613718411Z"></path> 
    <path fill="#ff9896" d="M51.4312095755914,70.7889870078079A87.5,87.5,0,0,1,-51.43120957559139,70.7889870078079L-37.91214877286451,52.18159613718411A64.5,64.5,0,0,0,37.91214877286452,52.18159613718411Z"></path> 
    <path fill="#9467bd" d="M-51.43120957559139,70.7889870078079A87.5,87.5,0,0,1,-83.21744517582594,-27.038987007807886L-61.34314530103741,-19.9315961371841A64.5,64.5,0,0,0,-37.91214877286451,52.18159613718411Z"></path> 
    <path fill="#c5b0d5" d="M-83.21744517582594,-27.038987007807886A87.5,87.5,0,0,1,-1.607348923880901e-14,-87.5L-1.1848457781750641e-14,-64.5A64.5,64.5,0,0,0,-61.34314530103741,-19.9315961371841Z"></path> 
  </g>  
   
<use xlink:href="#greenCircle"  transform="rotate(-10 87.5 87.5)" />  
<use xlink:href="#greenCircle"  transform="rotate(62 87.5 87.5)" />  
<use xlink:href="#greenCircle"  transform="rotate(134 87.5 87.5)" />  
<use xlink:href="#greenCircle"  transform="rotate(206 87.5 87.5)" />  
<use xlink:href="#greenCircle"  transform="rotate(278 87.5 87.5)" />   
 
</svg>

Ставлю единичку перед "М" в формуле пути d="1M83.21744517582593 и этот конкретный путь исчезает.

Теперь я знаю какой конкретный путь отвечает за конкретную часть изображения.
Если нужно одновременно перекрасить много участков с одинаковым цветом, то в Notepad++ делаю поиск с одновременной заменой по этому параметру #d62728

update

по результатам уточнений в вопросе

Взял ваш эскиз в качестве образца для SVG файла

Ниже код svg

Патчи не заполнены цветом. Только закрашены строки.

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="840" height="594" viewBox="0 0 1488 1024" version="1.1" > 
 
  <g stroke-width="2"> 
   
 <path id="yellow" fill="none" stroke="orangered" d="m90.1 154.6c0 0 61.7-61.3 99.1-55.5 31.8 4.9 36 59 66.1 70.6 66.6 25.6 144.3-36.4 213.2-18 36.5 9.7 55.8 58.3 93.1 64.6 31.2 5.3 91.6-25.5 91.6-25.5l0 0" /> 
  <path id="black" fill="none" stroke="black" d="m201.2 34.5c0 0-38.9 193.8-78.1 283.7-20.9 48-82.6 133.6-82.6 133.6l0 0" /> 
  <path id="grey" fill="none" stroke="grey" d="m55.5 343.7c0 0 113.1-23.2 168.1-12 61.6 12.5 105.6 79 168.1 85.6 44.3 4.7 85.1-27.9 129.1-34.5 27.7-4.1 58.4-14.3 84.1-3 35.4 15.6 75.1 88.6 75.1 88.6l0 0" /> 
  <path id="pink" fill="none" stroke="hotpink"  d="m680.1 63c0 0-80.9 46.3-108.1 82.6-31.6 42.1-64.4 95-57 147.1 3.4 23.7 42.5 33.2 43.5 57 3.3 73.2-117.1 186.2-117.1 186.2l0 0" /> 
  </g> 
</svg>

Следующий пример с заполнением цветом.

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="840" height="594" viewBox="0 0 1488 1024" version="1.1" style="border:1px solid red;"> 
 
  <g stroke-width="3"> 
   
 <path id="yellow" fill="grey" stroke="orangered" d="m90.1 154.6c0 0 61.7-61.3 99.1-55.5 31.8 4.9 36 59 66.1 70.6 66.6 25.6 144.3-36.4 213.2-18 36.5 9.7 55.8 58.3 93.1 64.6 31.2 5.3 91.6-25.5 91.6-25.5l0 0" /> 
  <path id="black" fill="grey" stroke="black" d="m201.2 34.5c0 0-38.9 193.8-78.1 283.7-20.9 48-82.6 133.6-82.6 133.6l0 0" /> 
  <path id="grey" fill="orangered" stroke="grey" d="m55.5 343.7c0 0 113.1-23.2 168.1-12 61.6 12.5 105.6 79 168.1 85.6 44.3 4.7 85.1-27.9 129.1-34.5 27.7-4.1 58.4-14.3 84.1-3 35.4 15.6 75.1 88.6 75.1 88.6l0 0" /> 
  <path id="pink" fill="dodgerblue" stroke="hotpink"  d="m680.1 63c0 0-80.9 46.3-108.1 82.6-31.6 42.1-64.4 95-57 147.1 3.4 23.7 42.5 33.2 43.5 57 3.3 73.2-117.1 186.2-117.1 186.2l0 0" /> 
  </g> 
</svg>

Видите как fill работает, если каждый конкретный path не замкнут,- распределение цвета идет по обе стороны от линии. Рассчитать точки пересечения патчей это одно, а вот вычислить, как будет распределен цвет, это уже более трудная задача и я не знаю, есть ли у неё простое решение. Так как просто рассчитать скриптом площадь такой криволинейной фигуры и то довольно сложная задача.

Создание сайта для салона красоты в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Работа с DOM во vue?

Допустим у меня есть 4 компонента - main, header, first, second header - это плавающий navbar в котором при скороле переключаются активные ссылки на компонент...

278

javascript