径向渐变剪切路径

Question

我想使用剪辑路径在另一张图片后面显示一张图片。

我正在使用 svg 圆形元素。我想要的结果是柔和的渐变边缘，而不是 clipPath 提供的硬边缘。

这可能吗？我知道我可以用面具来做，但似乎无法让它与 clipPath 一起工作。

到目前为止，这是我的代码：

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

Answer 1

不，如果你想要渐变，你必须使用<mask>，<clipPath>只考虑内部形状的几何形状。

径向渐变剪切路径

Radial Gradient Clippath

svg

gradient

clip-path