可以使用<pattern>元素定义模式。它用于以平铺方式填充图形元素。
例子
<html>
<title>SVG Pattern</title>
<body>
<h1>SVG Pattern</h1>
<svg width="950" height="950">
<defs>
<pattern id="pattern1" patternUnits="userSpaceOnUse"
x="0" y="0" width="100" height="100"
viewBox="0 0 3 4" >
<path d="M 0 0 L 3 0 L 1.5 3 z" fill="orange" stroke="green" />
</pattern>
</defs>
<g>
<text x="30" y="40" >Triangle using the Pattern </text>
<rect x="100" y="100" width="300" height="300" stroke="orange"
stroke-width="3" fill="url(#pattern1)" />
</g>
</svg>
</body>
</html>立即测试
解释
- <pattern>的id属性定义了模式的唯一名称。
- patternUnits用于定义x, y, 宽度和高度属性。
- x和y是图案边界框的x和y轴坐标。
