Working example with <circle>
<svg viewBox="-20 -20 150 150" xmlns="http://www.w3.org/2000/svg"> <clipPath id="myClip" clipPathUnits="objectBoundingBox"> <circle cx=".5" cy=".5" r=".5" /> </clipPath> <rect x="0" width="100" height="100" rx="15" clip-path="url(#myClip)" /> </svg>
Same but using <line>
- does not work
<svg viewBox="-20 -20 150 150" xmlns="http://www.w3.org/2000/svg"> <clipPath id="myClip" clipPathUnits="objectBoundingBox"> <line x1="0" y1="0" x2="1" y2="1" /> </clipPath> <rect x="0" width="100" height="100" rx="15" clip-path="url(#myClip)" /> </svg>
I expected to see part of the square, but nothing is shown
It seems that
cannot be used in
P粉4278776762023-09-17 09:49:11
An alternative to
clippath could be <mask>
. The advantage is that any SVG element can be used for "drawing".
<svg height="80vh" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <mask id="m1" maskContentUnits="objectBoundingBox"> <line x1="0" y1="0" x2="1" y2="1" stroke="white" stroke-width=".5" /> </mask> <rect width="100" height="100" rx="15" mask="url(#m1)" /> </svg>