вырезать объект из SVG - PullRequest
Новая
       31

вырезать объект из SVG

0 голосов
/ 17 мая 2018

У меня есть изображение, пурпурный цвет которого посередине должен быть прозрачным. За тем пурпурным желтый цвет просто продолжается, через который он не работает.

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

привет

https://media.scoutwiki.org/images/c/c3/Badge_Scouting_Nederland.svg

1 Ответ

0 голосов
/ 18 мая 2018

Давайте начнем с упрощенной версии вашего SVG.Я просто собираюсь использовать прямоугольники в качестве замены для ваших двух фигур. 

<svg width="300" height="300">

  <text x="0" y="100">There is some sectret text hiding behind here!</text>
  <rect id="shamrock" fill="gold" x="0" y="0" width="300" height="200"/>
  <rect id="fleur-de-lis" x="50" y="50" width="200" height="250" fill="purple" opacity="0.5"/>

</svg>

Обратите внимание, что я спрятал некоторый текст за желтой формой, которая сейчас скрыта.Кроме того, вы можете видеть желтый прямоугольник через полупрозрачный фиолетовый прямоугольник.

Чтобы увидеть желтый прямоугольник, нам нужно вырезать в нем отверстие, которое имеет ту же форму, что и фиолетовый элемент.Мы можем сделать это используя маску. 

<svg width="300" height="300">

  <defs>
    <mask id="fleur-de-lis-mask">
      <rect width="100%" height="100%" fill="white"/>             <!-- white means "keep these parts" -->
      <rect x="50" y="50" width="200" height="250" fill="black"/> <!-- black represents the part that is the hole -->
    </mask>
  </defs>

  <text x="0" y="100">There is some sectret text hiding behind here!</text>
  <rect id="shamrock" fill="gold" x="0" y="0" width="300" height="200" mask="url(#fleur-de-lis-mask)"/>

</svg>

Обратите внимание, что я временно удалил фиолетовый прямоугольник, чтобы мы могли видеть, что происходит.

Если мы сейчас вернем его обратно, у нас будетконечный результат. 

<svg width="300" height="300">

  <defs>
    <rect id="fleur-de-lis-shape" x="50" y="50" width="200" height="250"/>
    
    <mask id="fleur-de-lis-mask">
      <rect width="100%" height="100%" fill="white"/>      <!-- white means "keep these parts" -->
      <use xlink:href="#fleur-de-lis-shape" fill="black"/> <!-- black represents the part that is the hole -->
    </mask>
  </defs>

  <text x="0" y="100">There is some sectret text hiding behind here!</text>
  <rect id="shamrock" fill="gold" x="0" y="0" width="300" height="200" mask="url(#fleur-de-lis-mask)"/>
  <use id="fleur-de-lis" xlink:href="#fleur-de-lis-shape" fill="purple" opacity="0.5"/>

</svg>

Обратите внимание, что нам нужно использовать фиолетовую фигуру дважды: один раз как сам по себе, и один раз в маске.Чтобы сделать файл меньше, мы можем определить форму один раз в разделе <defs>, а затем использовать элемент <use> для ссылки на него в обоих местах.

Это, вероятно, кажется немного ненужным только для прямоугольника, но если ваша фигура - сложный путь, это может быть отличной экономией места.

...