Маска работает правильно на конкретные линии

Question

Описание

Пытаюсь создать иконку мины. С таким кодом...

<svg width="32" height="32" viewBox="-16 -16 32 32" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="circle-clip">
            <rect x="-16" y="-16" width="64" height="64" fill="white" />
            <circle r="2" cx="-2" cy="-2" fill="black" />
        </mask>
    </defs>
    <line x1="-11" y1="0" x2="11" y2="0" stroke="#151515" stroke-linecap="round" />
    <line x1="0" y1="-11" x2="0" y2="11" stroke="#151515" stroke-linecap="round" />
    <line x1="-7" y1="-7" x2="7" y2="7" stroke="#151515" stroke-linecap="round" />
    <line x1="7" y1="-7" x2="-7" y2="7" stroke="#151515" stroke-linecap="round" />
    <circle r="7" cx="0" cy="0" fill="#151515" mask="url(#circle-clip)" />
</svg>

...получается вот так:

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

<svg width="32" height="32" viewBox="-16 -16 32 32" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="circle-clip">
            <rect x="-16" y="-16" width="64" height="64" fill="white" />
            <circle r="2" cx="-2" cy="-2" fill="black" />
        </mask>
    </defs>
    <line x1="-11" y1="0" x2="11" y2="0" stroke="#151515" stroke-linecap="round" />
    <line x1="0" y1="-11" x2="0" y2="11" stroke="#151515" stroke-linecap="round" />
    <line x1="-7" y1="-7" x2="7" y2="7" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <line x1="7" y1="-7" x2="-7" y2="7" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <circle r="7" cx="0" cy="0" fill="#151515" mask="url(#circle-clip)" />
</svg>

Если я использую маску на НЕ диагональные линии, то они исчезают полностью:

<svg width="32" height="32" viewBox="-16 -16 32 32" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="circle-clip">
            <rect x="-16" y="-16" width="64" height="64" fill="white" />
            <circle r="2" cx="-2" cy="-2" fill="black" />
        </mask>
    </defs>
    <line x1="-11" y1="0" x2="11" y2="0" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <line x1="0" y1="-11" x2="0" y2="11" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <line x1="-7" y1="-7" x2="7" y2="7" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <line x1="7" y1="-7" x2="-7" y2="7" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <circle r="7" cx="0" cy="0" fill="#151515" mask="url(#circle-clip)" />
</svg>

Насколько я понимаю, маску правильно настроил...

Вопрос

Почему это происходит?
Как это исправить?

Answer 1

Я нашёл вот такой тикет в багтрекере Chromium-а, и похоже это какой-то специфический случай для объектов с пустым bounding box.

Можно задать maskUnits="userSpaceOnUse" x="-16" y="-16" у маски.

А можно просто сгруппировать все элементы и поставить маску на группу.

<svg width="320" height="320" viewBox="-16 -16 32 32" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <mask id="circle-clip">
        <rect x="-16" y="-16" width="64" height="64" fill="white" />
        <circle r="2" cx="-2" cy="-2" fill="black" />
      </mask>
    </defs>
    <g mask="url(#circle-clip)">
      <line x1="-11" y1="-0" x2="11" y2="0" stroke="#151515" stroke-linecap="round" />
      <line x1="0" y1="-11" x2="0" y2="11" stroke="#151515" stroke-linecap="round" />
      <line x1="-7" y1="-7" x2="7" y2="7" stroke="#151515" stroke-linecap="round" />
      <line x1="7" y1="-7" x2="-7" y2="7" stroke="#151515" stroke-linecap="round" />
    <circle r="7" cx="0" cy="0" fill="#151515" />
    </g>
</svg>

БЛОГ НА HUSL

Маска работает правильно на конкретные линии

Описание

Вопрос

Ответы (1 шт):