Блог

В настоящее время работаю над проектом, в котором используется ползунок для сравнения двух разных изображений, наложенных на SVG. К SVG-элементам с правой стороны ползунка применена маска, в то время как к SVG-элементам слева должна оставаться неизменной.

Моя проблема в том, что при использовании маски для применения этих стилей маска обрезает любой элемент, который она не покрывает.

Код воспроизведения:https://codepen.io/anon/pen/VNEOPy

Супер минимальное воспроизведение:

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px">
  <defs>
    <pattern
      id="pattern"
      width="10"
      height="10"
      patternUnits="userSpaceOnUse"
    >
      <circle cx="5" cy="5" r="5" fill="#999"></circle>
    </pattern>
    <mask id="masker">
      <rect x="0" y="0" width="25%" fill="url(#pattern)"></rect>
    </mask>
  </defs>

  <circle cx="50" cy="50" r="50" mask="url(#masker)"></circle>
</svg>
  

Что я хотел бы сделать, так это применить маску к той части элемента, которую покрывает маска, и позволить остальной части элемента оставаться видимой / неизменной.

Этот CodePen демонстрирует поведение, которое я ищу, но требует дублирования каждого из SVG (что, к сожалению, технически невозможно в моем случае):https://codepen.io/anon/pen/vMzwbP

Есть ли способ добиться такого поведения с помощью маскировки? Я смотрю не в том месте?

Нет. Вам всегда нужно будет иметь два экземпляра круга. Один с примененной маской, а другой без маски (или обратной маски).