how to set clipPath as a pattern using svg?-CodePudding

I created the pattern, then gave it to the circle inside the . clipPath I set to the image, but the pattern was not set for the image. How can I set a mask as a pattern for an image?

I was expecting to see a mask for the image in the form of a created pattern

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">  

            <pattern id="cube" x="0" y="10" width="20" height="20" patternUnits="userSpaceOnUse">   
                <rect x="0" y="0" width="10" height="10" />
                <rect x="10" y="10" width="10" height="10" />
            </pattern> 

            <clipPath id="msk1">
                <circle fill="url(#cube)" cx="50%" cy="50%" width="100%" height="100%"  r="200" /> 
            </clipPath>    

            <image xlink:href="wave.jpg"  height="100%" clip-path="url(#msk1)"/> 
    </svg>

CodePudding user response：

If you want a mask, then use a <mask>, not a <clipPath>, which as its name implies will create a clipping area from a path. What you want is for the pixels to create the mask, and that's what a <mask> does.

svg { max-height: 100vh }

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">  

    <pattern fill="white" id="cube" x="0" y="10" width="20" height="20" patternUnits="userSpaceOnUse">   
        <rect x="0" y="0" width="10" height="10" />
        <rect x="10" y="10" width="10" height="10" />
    </pattern> 

    <mask id="msk1">
        <circle fill="url(#cube)" cx="50%" cy="50%" width="100%" height="100%"  r="200" /> 
    </mask>    

    <image xlink:href="https://picsum.photos/400/400"  height="100%" mask="url(#msk1)"/> 
</svg>

(Note that I did set the rectangles of the pattern white, we could also have drawn a full white rectangle behind the black ones for the same effect).