SVG. Маска(mask) не перекрывает path, если это прямая линия

Question

Есть две серые линии: прямая и изогнутая(id="1" и id="2"). У линий есть лейблы/заголовки.

Мне нужно показать выделение этих линий с заголовками. Задача - не просто окрасить границы, а именно наложить элементы выделения поверх. В коде это id="selecting1" и id="selecting2".

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

Для удобства добавила opacity в код, которое можно менять с 1 на 0 и смотреть как линия будет выглядеть без выделения.

https://codepen.io/bulkinhrust/pen/mybeoBY?editors=1010

<svg
     xmlns="http://www.w3.org/2000/svg"
     width="1000"
     height="1000"
     viewBox="0 0 1000 1000">
  <g id="1">
    <path d="M 396 118 L 628 118" stroke="#ccc" />
    <rect height="34"  width="89.2" x="450" y="100" stroke="#ccc" fill="#fff" />
    <text x="455" y="123" stroke="#ccc">Hello World</text>
  </g>
  
  <g id="selecting1" style="opacity: 1">
    <mask id="mask1">
      <path d="M 396 118 L 628 118" strokeWidth="2" stroke="white" />
      <rect height="34"  width="89.2" x="450" y="100" strokeWidth="2" fill="black" />
    </mask>
    <path d="M 396 118 L 628 118" stroke="blue" mask="url(#mask1)" />
    <rect height="34"  width="89.2" x="450" y="100" stroke="blue" fill="transparent" />
  </g>
  
  <g id="2">
    <path d="M 528 156 L 468 156 Q 462 156 462 162 L 462 216 Q 462 222 456 222 L 396 222" stroke="#ccc" fill="transparent" />
    <rect height="34"  width="89.2" x="420" y="170" stroke="#ccc" fill="#fff" />
    <text x="425" y="193" stroke="#ccc">Hello World</text>
  </g>
  
  <g id="selecting2" style="opacity: 1">
    <mask id="mask2">
      <path d="M 528 156 L 468 156 Q 462 156 462 162 L 462 216 Q 462 222 456 222 L 396 222" strokeWidth="2" stroke="white" />
      <rect height="34"  width="89.2" x="420" y="170" strokeWidth="2" fill="black" />
    </mask>
    <path d="M 528 156 L 468 156 Q 462 156 462 162 L 462 216 Q 462 222 456 222 L 396 222" stroke="blue" mask="url(#mask2)" />
    <rect height="34"  width="89.2" x="420" y="170" stroke="blue" fill="transparent" />
  </g>
</svg>

Answer 1

Помог вот этот ответ.

Необходимо добавить в тег mask maskUnits="userSpaceOnUse"

<mask id="mask1" maskUnits="userSpaceOnUse">
   <path d="M 396 118 L 628 118 Z" strokeWidth="2" stroke="white" fill="white" />
   <rect height="34"  width="89.2" x="450" y="100" strokeWidth="2" fill="black" />
</mask>

либо сгруппировать то, на что накладывается маска, добавить маску этой группе, и в самой маске прямоугольник окрасить в белый и добавить черный прямоугольник поменьше. (Первый вариант попроще)

<g id="selecting1" style="opacity: 1">
  <mask id="mask1">
    <path d="M 396 118 L 628 118" strokeWidth="2" stroke="white" />
    <rect height="34"  width="89.2" x="450" y="100" fill="white" />
    <rect height="32"  width="87.2" x="451" y="101" fill="black" />
  </mask>
  <g mask="url(#mask1)">
    <path d="M 396 118 L 628 118" stroke="blue" />
    <rect height="34"  width="89.2" x="450" y="100" stroke="blue" fill="transparent" />
  </g>
</g>

БЛОГ НА HUSL

SVG. Маска(mask) не перекрывает path, если это прямая линия

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