3

<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>

3
  • в маску надо положить rect со 100% шириной и высотой в fill="#fff" 24 июн 2020 в 13:33
  • а если я хочу круг чтобы был ?
    – Leks
    24 июн 2020 в 13:45
  • проверь а потом если не получится - напиши 24 июн 2020 в 13:46

2 ответа 2

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>

2
  • спасибо большое
    – Leks
    26 июн 2020 в 9:13
  • @Leks всегда рад помочь 26 июн 2020 в 9:44
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.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.