Exemple de travail avec <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>
Idem mais en utilisant <line>
- ne fonctionne pas
<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>
Je m'attendais à voir une partie de la place, mais rien n'est affiché
semble être utilisé dans
不能在
Une alternative à
clippath pourrait être
<mask>
. L'avantage est que n'importe quel élément SVG peut être utilisé pour "dessiner".