SVG 教程: 元素定义图案并以平铺方式填充图形元素
SVG 使用 元素定义图案。图案使用 元素定义,用于将图形元素填充为平铺。
声明
以下是 元素的语法定义。我们只展示一些最重要的功能。
<pattern
patternUnits="units to define x,y, width and height attributes."
patternContentUnits ="units to define co-ordinate system of contents of pattern"
patternTransform = "definition of an additional transformation from the pattern coordinate system onto the target coordinate system"
x="x-axis co-ordinate"
y="y-axis co-ordinate"
width="length"
height="length"
preserveAspectRatio="to preserve width/height ratio of original content"
xlink:href="reference%20to%20another%20pattern" >
</pattern>
XML属性
| 编号 | 名称 | 描述 |
|---|---|---|
| 1 | 图案单位定义图案区域单位。它为模式的各种长度值和定义模式子区域的属性定义了坐标系。如果 | |
| 2 | patternContentUnits | 用于定义模式内容区域的单位。它为模式的各种长度值和定义模式子区域的属性定义了坐标系。如果 patternContentUnits = "userSpaceOnUse" ,则该值表示使用 'pattern' 元素时当前用户坐标系中的值。如果 patternContentUnits = "objectBoundingBox" ,则该值表示使用 'pattern' 元素时元素边界框的分数或百分比值。默认为 userSpaceOnUse。 |
| 3 | x | 图案边界框x的轴坐标。默认值为0。 |
| 4 | y | 图案边界框y轴的坐标。默认值为0。 |
| 5 | 宽度 | 图案边界框的宽度。默认值为0。 |
| 6 | 高度 | 图案边界框的高度。默认为0。 |
| 7 | preserveAspectRatio | 以保留原始内容的纵横比。 |
| 8 | xlink:href | 用于指代另一个状态。† 元素定义为 pattern1。 right 元素中,图案 url 的 fill 属性设置为使用之前创建的图案填充矩形。 在 Chrome 浏览器中打开文件:textSVG.html 并得到以下结果 - |
版权声明
本文仅代表作者观点,不代表Code前端网立场。
本文系作者Code前端网发表,如需转载,请注明页面地址。
code前端网