语言►SVG

SVG中的pattern元素

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/11/SVG%E4%B8%AD%E7%9A%84pattern%E5%85%83%E7%B4%A0/

摘要

本文主要讲述了：

  1. 作用
  2. attribute

正文

作用

定义用于填充背景的最小单元

示例：

1
2
3
4
5
6
7
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <pattern id="foo" width="0.5" height="0.5">
        <line x1="0" y1="0" x2="10" y2="10" style="stroke:#000"/>
        <line x1="10" y1="0" x2="0" y2="10" style="stroke:#000"/>
    </pattern>
    <rect width="100" height="100" style="fill:url(#foo);stroke:#000"/>
</svg>

attribute

width

<pattern>画布的宽度或相对于待填充区域宽度的比例

height

<pattern>画布的高度或相对于待填充区域高度的比例

x

x 坐标的偏移值或相对于待填充区域宽度的偏移比例

取值范围为[0, width)

示例：

1
2
3
4
5
6
7
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <pattern id="foo" width="0.5" height="0.5" x="0.45">
        <line x1="0" y1="0" x2="10" y2="10" style="stroke:#000"/>
        <line x1="10" y1="0" x2="0" y2="10" style="stroke:#000"/>
    </pattern>
    <rect width="100" height="100" style="fill:url(#foo);stroke:#000"/>
</svg>

y

y 坐标的偏移值或相对于待填充区域高度的偏移比例

取值范围为[0, height)

示例：

1
2
3
4
5
6
7
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <pattern id="foo" width="0.5" height="0.5" y="0.45">
        <line x1="0" y1="0" x2="10" y2="10" style="stroke:#000"/>
        <line x1="10" y1="0" x2="0" y2="10" style="stroke:#000"/>
    </pattern>
    <rect width="100" height="100" style="fill:url(#foo);stroke:#000"/>
</svg>

patternTransform

变换<pattern>

示例：绕(0, 0)旋转 30°

1
2
3
4
5
6
7
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <pattern id="foo" width="0.5" height="0.5" patternTransform="rotate(30)">
        <line x1="0" y1="0" x2="10" y2="10" style="stroke:#000"/>
        <line x1="10" y1="0" x2="0" y2="10" style="stroke:#000"/>
    </pattern>
    <rect width="100" height="100" style="fill:url(#foo);stroke:#000"/>
</svg>

示例：水平向右移动 45 个单位

1
2
3
4
5
6
7
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <pattern id="foo" width="0.5" height="0.5" patternTransform="translate(45)">
        <line x1="0" y1="0" x2="10" y2="10" style="stroke:#000"/>
        <line x1="10" y1="0" x2="0" y2="10" style="stroke:#000"/>
    </pattern>
    <rect width="100" height="100" style="fill:url(#foo);stroke:#000"/>
</svg>

示例：缩小一半

1
2
3
4
5
6
7
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <pattern id="foo" width="0.5" height="0.5" patternTransform="scale(0.5)">
        <line x1="0" y1="0" x2="10" y2="10" style="stroke:#000"/>
        <line x1="10" y1="0" x2="0" y2="10" style="stroke:#000"/>
    </pattern>
    <rect width="100" height="100" style="fill:url(#foo);stroke:#000"/>
</svg>

patternUnits

定义width、height、x、y的坐标系及单位长度

  • objectBoundingBox 相对于待填充区域的小数或百分比，最小为 0，最大为 1
  • userSpaceOnUse 相对于<svg>的 viewport 而言

默认值为objectBoundingBox

示例：

1
2
3
4
5
6
7
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <pattern id="foo" width="50" height="50" x="25" y="0" patternUnits="userSpaceOnUse">
        <line x1="0" y1="0" x2="10" y2="10" style="stroke:#000"/>
        <line x1="10" y1="0" x2="0" y2="10" style="stroke:#000"/>
    </pattern>
    <rect width="100" height="100" style="fill:url(#foo);stroke:#000"/>
</svg>

patternContentUnits

定义<pattern>子元素的坐标系及单位长度

  • objectBoundingBox 相对于待填充区域的小数或百分比，最小为 0，最大为 1
  • userSpaceOnUse 相对于<svg>的 viewport 而言

默认值为userSpaceOnUse

注意：viewBox的作用区域和patternContentUnits相同，若两者同时被声明，patternContentUnits将失效

示例：

1
2
3
4
5
6
7
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <pattern id="foo" width="1" height="1" patternContentUnits="objectBoundingBox">
        <line x1="0" y1="0" x2="1" y2="0" style="stroke:#000"/>
        <line x1="0" y1="0" x2="0" y2="1" style="stroke:#000"/>
    </pattern>
    <rect width="100" height="100" style="fill:url(#foo);stroke:#000"/>
</svg>

href

被复用的元素的 URL

示例：

1
2
3
4
5
6
7
8
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <pattern id="foo" width="0.5" height="0.5">
        <line x1="0" y1="0" x2="10" y2="10" style="stroke:#000"/>
        <line x1="10" y1="0" x2="0" y2="10" style="stroke:#000"/>
    </pattern>
    <pattern id="bar" href="#foo"/>
    <rect width="100" height="100" style="fill:url(#bar);stroke:#000"/>
</svg>

viewBox

viewBox用于重新定义坐标系和单位长度。

viewBox的值由 4 个数字组成：

  • 最小的 x 坐标
  • 最小的 y 坐标
  • 宽度
  • 高度

注意：viewBox的作用区域和patternContentUnits相同，若两者同时被声明，patternContentUnits将失效

示例：

  • 在100px * 100px的<pattern>画布大小内，x 方向的最小值为0，最大值为200，y 方向的最小值为0，最大值为200
  • x 方向上，1 单位长度表示2px，y 方向上，1 单位长度表示2px
  • 使用id为foo的<pattern>填充100px * 100px的<rect>
1
2
3
4
5
6
7
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <pattern id="foo" width="100" height="100" x="75" patternUnits="userSpaceOnUse" viewBox="0 0 200 200">
        <line x1="0" y1="0" x2="100" y2="100" style="stroke:#000"/>
        <line x1="100" y1="0" x2="0" y2="100" style="stroke:#000"/>
    </pattern>
    <rect width="100" height="100" style="fill:url(#foo);stroke:#000"/>
</svg>

preserveAspectRatio

当viewBox中定义的宽高比和 viewport 的宽高比不相等时，图形如何缩放和对齐

原理同SVG中的svg元素一文，此处不再赘述

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/11/SVG%E4%B8%AD%E7%9A%84pattern%E5%85%83%E7%B4%A0/

本文对你有帮助？请支持我

支付宝
微信