是否可以使用一个 SVG 形状作为另一个形状的填充?
问问题
1297 次
1 回答
8
您想使用SVG Pattern。看这个例子:
<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="TrianglePattern" patternUnits="userSpaceOnUse"
x="0" y="0" width="100" height="100"
viewBox="0 0 10 10" >
<path d="M0,0 L7,0 L3.5,7 z" fill="red" stroke="blue" />
</pattern>
</defs>
<!-- The ellipse is filled using a triangle pattern paint server
and stroked with black -->
<ellipse fill="url(#TrianglePattern)" stroke="black" stroke-width="5"
cx="400" cy="200" rx="350" ry="150" />
</svg>
注意:
将剪辑绘制的内容
viewBox
。<pattern>
(如示例中所示,每个三角形的顶部笔划和左上角都略微隐藏。)当 与
viewBox
的大小不同时width
,height
您正在有效地缩放图案中图形的大小。(该示例将模式中的 7 个单位宽的三角形放大了 10 倍,因此在 700 个单位宽的椭圆的宽度上只有 7 个(加上填充)可见。)
于 2012-04-06T21:44:50.643 回答