Почему mask с градиентом внутри, примененная к изображению, не работает?

Question

<svg width='400' height='400' style='border: 1px solid black'>
  
<radialGradient id='a'>
  <stop offset='40%' stop-color='red'></stop>
  <stop offset='60%' stop-color='blue'></stop>
</radialGradient>

<mask id='b'>
  <circle r="50" cx="50%" cy="50%" fill="url(#a)" />
</mask>
<image x="50%" y="50%" width="291" height="195"
       mask="url(#b)" xlink:href="https://i.ibb.co/1XcpWKV/0E5BJ.png"/>

</svg>

Answer 1

Если я Вас правильно понял то должно быть что-то вроде этого.

<!DOCTYPE html>
<html>
    <body>
    <svg width='1241' height='823' style='border: 1px solid black'>
        <radialGradient id='a'>
            <stop offset='40%' stop-color='red'></stop>
            <stop offset='60%' stop-color='blue'></stop>
        </radialGradient>
        <symbol id="s-mask">
            <circle r="350" cx="50%" cy="50%" fill="url(#a)" />
        </symbol>
        <mask id='b' x="0" y="0">
            <use xlink:href="#s-mask"></use>
        </mask>
        <image mask="url(#b)" xlink:href="https://www.dlt.travel/immagine/46566/Tour_virtural_Taj_mahal.jpg"/>        
    </svg>
    </body>
</html>

Обратите внимание на тэг USE.

Answer 2

Как указал в комментариях @MaximLensky, чтобы маска заработала, необходимо добавить в маску

<rect width="100%" height="100%" fill="#fff" />

Это делает всю область изображения видимым, то есть не обрезается маской.

При применении в маске заполнения цветами отличающимися от белого, маска делает участок изображения полупрозрачным.
При fill="black", участок изображения, к которому применена маска, вырезается. Подробнее тут

Используемое изображение имеет размеры 400 х 143px поэтому немного изменил исходный код

<svg width='400' height='400' style='border: 1px solid black'>
  
<radialGradient id='a'>
  <stop offset='40%' stop-color='red'></stop>
  <stop offset='60%' stop-color='blue'></stop>
</radialGradient>

<mask id='b'> 
   <rect width="100%" height="100%" fill="#fff" />
  <circle r="50" cx="50%" cy="50%" fill="url(#a)" />
</mask>
<image x="50%" y="50%" width="400" height="143"
       mask="url(#b)" xlink:href="https://i.ibb.co/1XcpWKV/0E5BJ.png"/>

</svg>

При <image x="0%" y="50%"

<svg width='400' height='400' style='border: 1px solid black'>
  
<radialGradient id='a'>
  <stop offset='40%' stop-color='red'></stop>
  <stop offset='60%' stop-color='blue'></stop>
</radialGradient>

<mask id='b'> 
   <rect width="100%" height="100%" fill="#fff" />
  <circle r="50" cx="50%" cy="50%" fill="url(#a)" />
</mask>
<image x="0%" y="50%" width="400" height="143"
       mask="url(#b)" xlink:href="https://i.ibb.co/1XcpWKV/0E5BJ.png"/>

</svg>

БЛОГ НА HUSL

Почему mask с градиентом внутри, примененная к изображению, не работает?

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