SVG маска рендеринга некорректно - PullRequest
Новая
       23

SVG маска рендеринга некорректно

0 голосов
/ 26 ноября 2018

Вот простая маска SVG ( fiddle ): 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-100 -400 600 600">

  <!-- Here I define the mask, a white rectangle with a strip removed -->
  <defs>
    <mask id="mymask">
      <rect x="100" y="-200" width="200" height="100" fill="white"/>
      <path d="M 250 -150  L 150 -150" stroke="black" fill="none" stroke-opacity="1" fill-opacity="1" stroke-width="25"/>
    </mask>
  </defs>

  <!-- This masked blue rectangle is displayed correctly, and lets us see where the mask is -->
  <rect x="-100" y="-300" width="500" height="500" fill="blue" fill-opacity="0.2" mask="url(#mymask)"/>

  <!-- This green vertical line is not masked, and is drawn on top of the blue rectangle -->
  <path d="M 220 -110 L 220 -190" stroke="green" stroke-opacity="0.5" stroke-width="10" fill="none"/>

  <!-- INCORRECT - This masked red line should be drawn to the left of the green line, but it does not appear -->
  <path d="M 180 -110 L 180 -190" stroke="red" stroke-width="10" mask="url(#mymask)"/>

</svg>

Это дает следующий вывод:

enter image description here

Мне кажется, что это отображается неправильно: красная линия отсутствует.Красная линия должна появиться слева от зеленой линии, но с удаленной центральной частью, в соответствии с формой маски.Однако красная линия вообще не рисуется.

Я потратил много времени на изучение документации для масок SVG, но не вижу здесь проблемы.Если кто-нибудь увидит, что не так, я был бы очень признателен.Проблема не может быть связана с системой координат маски (часто с запутанной областью), потому что замаскированный синий прямоугольник отображается правильно.

1 Ответ

0 голосов
/ 26 ноября 2018

По умолчанию для масок используется единица измерения objectBoundingBox, в этом случае вам необходимо быть осторожным с этим

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

Отсутствующие фигуры не имеютвысота или ширина, поскольку они видны только штрихом.

...