Можно ли создать маску в файле SVG? - PullRequest
Новая
       32

Можно ли создать маску в файле SVG?

2 голосов
/ 19 апреля 2020

Я создал этот SVG, который правильно отображается в веб-браузере. 

<svg width="256" height="256">
  <defs>
<g id="maskPath">
  <polygon points="101 50 135 50 135 29 101 29" fill="black" transform="rotate(10, 101, 24)"/>
  <polygon points="121 50 155 50 155 29 121 29" fill="black" transform=" rotate(-10, 155, 24)"/>
</g>
<g id="symmetry" mask="url">
  <polygon points="128 124 116 100 124 100 124 56 132 56 132 100 140 100 128 124"/>
  <polygon points="96 29 160 29 160 24 96 24"/>
  <polygon points="96 24 120 24 120 19 96 19" transform="rotate(100, 96, 24)"/>
  <polygon points="136 24 160 24 160 19 136 19" transform="rotate(-100, 160, 24)"/>
</g>
  </defs>
  <mask id="mask">
<rect width="256" height="256" fill="white"/>
<use href="#maskPath" transform="rotate (0, 128, 128)"/>
<use href="#maskPath" transform="rotate (120, 128, 128)"/>
<use href="#maskPath" transform="rotate (-120, 128, 128)"/>
  </mask>
  <use href="#symmetry" transform="rotate (0, 128, 128)"/>
  <use href="#symmetry" transform="rotate (120, 128, 128)"/>
  <use href="#symmetry" transform="rotate (240, 128, 128)"/>
  <circle cx="128" cy="128" r="56" stroke="black" stroke-width="12" fill-opacity="0"/>
  <circle cx="128" cy="128" r="88" stroke="black" stroke-width="5" fill-opacity="0" mask="url(#mask)"/>
</svg>

Image showing the SVG correctly

Однако, если я изменю расширение на .svg и открою его в программе просмотра SVG, оно отобразит неправильно. Похоже, что все в <defs> и <mask> отсутствует.

Image showing the SVG incorrectly

Являются ли <mask> и <defs> HTML - только теги? Результат похож на других зрителей SVG. Есть ли другой способ вырезать части круга? Зеленый на этом изображении - маска, которую я хочу применить.

Correct mask

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

Редактировать: Замена href на xlink:href заставляет стрелки появляться, но внешний круг все еще отсутствует. (В Inkscape круг есть, но он не замаскирован.)

Different broken SVG

1 Ответ

2 голосов
/ 22 апреля 2020

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

Это гораздо эффективнее, поскольку нет операции растровой маски. 

<svg width="256" height="256">
  <defs>
<g id="symmetry">
  <polygon points="128 124 116 100 124 100 124 56 132 56 132 100 140 100 128 124"/>
  <polygon points="96 29 160 29 160 24 96 24"/>
  <polygon points="96 24 120 24 120 19 96 19" transform="rotate(100, 96, 24)"/>
  <polygon points="136 24 160 24 160 19 136 19" transform="rotate(-100, 160, 24)"/>
</g>
  </defs>
  <use href="#symmetry" transform="rotate (0, 128, 128)"/>
  <use href="#symmetry" transform="rotate (120, 128, 128)"/>
  <use href="#symmetry" transform="rotate (240, 128, 128)"/>
  <circle cx="128" cy="128" r="56" stroke="black" stroke-width="12" fill="none"/>
  <circle cx="128" cy="128" r="88" stroke="black" stroke-width="5" fill="none" stroke-dasharray="118.3 66" transform="rotate(51.4, 128, 128)"/>
</svg>

Точные значения предоставлены Полом Лебо

Здесь есть 3 ключевых числа, значения штрих-черты, которые должны быть добавлены к 2 x PI / 3 (потому что 3-кратной симметрии) и первое значение поворота. Вы можете играть с числами, пока не получите идеальный результат, но приведенные выше значения довольно хороши.

...