带有<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>
相同的但是使用<line>
- 不起作用
<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>
我期望看到正方形的一部分,但是没有显示任何内容
似乎
不能在
中使用
clippath的替代方案可以是
<mask>
。优点是可以使用任何SVG元素进行“绘制”。