SVG в HTML: как использовать разноцветный SVG в качестве маски - PullRequest
Новая
       36

SVG в HTML: как использовать разноцветный SVG в качестве маски

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

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

Как я могу использовать многоцветное определение SVG X в качестве маски, чтобы внешнийформа Х определяет "дыру", которую нужно вырезать?

Вот три изображения, которые иллюстрируют то, чего я пытаюсь достичь:

svg # 1 для использования в качестве маски

svg #2, на котором внешняя форма # 1 должна использоваться в качестве вырезаПредложенное enxaneta не применимо к моей проблеме, так как у меня есть много «сложных» внешних определений SVG, и я не хочу менять каждое из них.

Есть ли другой, более простой способ достижения того, что яхочу?

Ответы [ 2 ]

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

Вы должны определить свои пути без заливки.Затем вы используете свои пути для маски и заполните их белым цветом.Чтобы нарисовать изображение, вы заполняете эти пути выбранными вами цветами. 

svg{border:1px solid; width:49vw}
svg:nth-child(2){background:red;}
mask use{fill:white;}
<svg viewBox="0 0 100 50">
  <defs>
   <polygon id="a"  points="30,5 70,20 75,40 20,20" />
   <circle id="b" cx="50" cy="25" r="15" />
   <circle id="c" cx="60" cy="35" r="10" />
   <mask id="m">
   <use xlink:href="#a"/>
   <use xlink:href="#b"/>
   <use xlink:href="#c"/>
   </mask>

  </defs>
  <g id="complexShape">
  <use xlink:href="#a" fill="lightblue" />
  <use xlink:href="#b" fill="gold"/>
  <use xlink:href="#c" fill="red"/>
  </g>
</svg>
<svg viewBox="0 0 100 50">
  <rect width="100" height="50" style="mask: url(#m)" />
</svg>
0 голосов
/ 11 декабря 2018

Цвет маски определяет конечную непрозрачность маскируемого объекта в этой точке.Компоненты R, G, B и A цвета маски объединяются в формулу для определения значения яркости, которое используется для установки окончательной прозрачности, что маска будет этой точкой.Так, например, если маска красная, окончательный результат маскирования будет полупрозрачным.

Невозможно сделать цветной объект сплошной (не полупрозрачной) маской.Это будет делать только полный белый цвет.

Обновление

Предполагается, что у вас есть внешнее изображение SVG, которое выглядит следующим образом: 

<svg viewBox="0 0 100 50">
 <polygon id="a"  points="30,5 70,20 75,40 20,20" fill="lightblue"/>
 <circle id="b" cx="50" cy="25" r="15" fill="gold"/>
 <circle id="c" cx="60" cy="35" r="10" fill="red" stroke="blue" stroke-width="4"/>
</svg>

Вы можете превратить это в "маску" версию, добавив три строки в начале вашего SVG. 

<svg viewBox="0 0 100 50">
 <filter id="blacken"><feFlood flood-color="black"/><feComposite operator="in" in2="SourceGraphic"/></filter>
 <style>svg :not(#maskbg) { filter: url(#blacken); }</style>
 <rect id="maskbg" x="-100%" y="-100%" width="300%" height="300%" fill="white"/>
 <polygon id="a"  points="30,5 70,20 75,40 20,20" fill="lightblue"/>
 <circle id="b" cx="50" cy="25" r="15" fill="gold"/>
 <circle id="c" cx="60" cy="35" r="10" fill="red" stroke="blue" stroke-width="4"/>
</svg>

Это то, что можно легко написать в сценарии.Этот метод должен работать почти для всех SVG.

После того, как вы создали все варианты маски, вы можете применить их, используя mask-image.

https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image

...