Создание исходной маски вокруг фигуры SVG - PullRequest
Новая
       64

Создание исходной маски вокруг фигуры SVG

0 голосов
/ 12 декабря 2018

В арт-проекте я рисую svg-фигуры по всему холсту, чтобы они могли время от времени перекрываться: enter image description here

В этих случаях мне нужен результатчтобы выглядеть примерно так:

enter image description here

Я думаю, мне нужно было бы создать какую-то форму, окружающую форму переднего плана, но я понятия не имею, какбудет в состоянии сделать это динамически.Есть ли способ сделать это?Из некоторых других вопросов, которые я получил подсказку, может быть возможность использования фильтров.Я был бы счастлив сделать это таким образом, если нет других, но я также слышал, что эти фильтры довольно ресурсоемки, что было бы проблемой, так как я немного оживляю здесь.

Надеюсь, выможет помочь мнеСпасибо за ваше время:)

1 Ответ

0 голосов
/ 12 декабря 2018

Если это обводки с обводкой, но без заливки, вы можете сделать следующее: вы используете каждый путь дважды с разной шириной обводки 

svg{background:#ccc; width:300px;}
<svg viewBox = "0 0 100 100">
  <defs>
    <path id="test" d="M10,75Q33,75 50,50 T90,25" fill="none" />
  </defs>
    <use xlink:href="#test" style="stroke:#fff;stroke-width:10; stroke-linecap: round" />
    <use xlink:href="#test" style="stroke:#000;stroke-width:3; stroke-linecap: round" />
...