Q:

Radial Gradient Clippath

I'm wanting to use a clip path to expose an image behind another image. 
Im using an svg circle element. The result I want is for a soft, gradient edge, instead of a hard edge supplied by the clipPath.
Is this possible? I know that I can do it with a mask, but cant seem to get it to work with clipPath. 
Heres my code so far:
 <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>

A:

No, you have to use a <mask> if you want gradients, <clipPath> only considers the geometry of the shapes inside.

