Radial Gradient Clippath

Я хочу использовать путь клипа, чтобы выставить изображение за другим изображением.Radial Gradient Clippath

Im, использующий элемент окружности svg. Результат, который я хочу, касается мягкого края градиента, а не жесткого края, предоставленного клипом.

Возможно ли это? Я знаю, что могу сделать это с помощью маски, но, похоже, не получается работать с клипом.

Heres мой код до сих пор:

<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500"> 
       <defs> 

        <radialGradient id="grad" cx="50%" cy="50%" r="50%"> 
         <stop stop-color="white" offset="0%"/> 
         <stop stop-color="black" offset="100%"/> 
        </radialGradient> 
        <clipPath id="clip1" > 
         <circle cx="0" cy="0" r="30" fill="url(#grad)" /> 
        </clipPath> 
       </defs> 


       <image id="darkMap" xlink:href="images/darkMapSml.jpg" width="100%" height="100%" ></image> 
      <image id="topImg" xlink:href="images/lightMapSml.jpg" width="100%" height="100%" clip-path="url(#clip1)" /> 


     </svg>

источник

2015-03-09 SMDev

Нет, вы должны использовать <mask>, если вы хотите, градиенты, <clipPath> рассматривает только геометрию форм внутри.

источник

2015-03-09 15:36:51

Спасибо Эрик ... Еще вопрос. Если я нахожу маршрут маски ..., который ive пытался ... и добавляет несколько кругов svg к маске динамически (onclick), он начинает замедлять производительность и становится ломающимся при прокрутке изображения. Есть ли другой способ приблизиться к этому? – SMDev

Я бы предложил задать новый вопрос с более полным кодом и включить подробные сведения о том, когда вы испытываете отставание (какое устройство, браузер и т. Д.). –

lol ... у меня есть, но никто не хочет отвечать на него ... ха-ха, но спасибо за вашу помощь в любом случае :) – SMDev

Radial Gradient Clippath

ответ

Смежные вопросы