SVG pattern

<svg viewBox="0 0 400 100" width="400">
    <pattern width=".5" height="1" id="wave">
        <path d="m0,55 q 100,20 200,0 t200,0 v45 h-400 z" fill="#acddea" />
    </pattern>
    <rect x="0" y="0"  fill="url(#wave)" width="800" height="100" opacity=".2">
        <animate attributeType="xml" attributeName="x" from="-400" to="0" repeatCount="indefinite" dur="4s"></animate>
    </rect>
    <rect x="0" y="0"  fill="url(#wave)" width="800" height="100" opacity=".15">
        <animate attributeType="xml" attributeName="x" from="-400" to="0" repeatCount="indefinite" dur="3s"></animate>
    </rect>
</svg>
<path d="m0,55 q 100,20 200,0 t200,0 v45 h-400 z" fill="#acddea" />

小写指令使用相对坐标,q创建单控制点二次方贝塞尔曲线,t翻转曲线控制点位置创建曲线
<pattern>定义填充图形,属性patternUnits指定x y width height使用哪一个坐标系,有两个值objectBoundingBoxuserSpaceOnUse

objectBoundingBox(默认值),把应用填充的元素<rect>看做是viewBox="0 0 1 1"x y width height使用<rect>的坐标系;widthheight取值范围是0~1或0%~100%,就是填充图形区域占比,0.5或50%就是填充两个

<svg viewBox="0 0 200 100" width="200" style="background: #f3f4f5;">
    <pattern x=".05" y="0" width=".25" height=".1" id="p1" patternUnits="objectBoundingBox">
        <circle cx="10" cy="10" r="10" fill="#acddea" />
    </pattern>
    <rect x="10" y="10"  fill="url(#p1)" width="100" height="100" stroke="#333"></rect>
</svg>

<svg viewBox="0 0 200 100" width="200" style="background: #f3f4f5;">
    <pattern x="0" y="0" width=".5" height="1" id="p2" patternUnits="objectBoundingBox">
        <circle cx="10" cy="10" r="10" fill="#acddea" />
    </pattern>
    <rect x="50" y="50"  fill="url(#p2)" width="100" height="100" stroke="#333"></rect>
</svg>

userSpaceOnUse,使用<pattern>元素所在的坐标系(即<svg>元素的坐标系),widthheight<pattern>的宽高

<svg viewBox="0 0  200 100" width="200" style="background: #f3f4f5;">
    <pattern x="10" y="10" width="20" height="20" id="p3" patternUnits="userSpaceOnUse">
        <circle cx="10" cy="10" r="10" fill="#acddea" />
    </pattern>
    <rect x="0" y="0"  fill="url(#p3)" width="100" height="100" stroke="#333"></rect>
</svg>

<svg viewBox="0 0  200 100" width="200" style="background: #f3f4f5;">
    <pattern x="0" y="0" width="40" height="50" id="p4" patternUnits="userSpaceOnUse">
        <circle cx="10" cy="10" r="10" fill="#acddea" />
    </pattern>
    <rect x="10" y="10"  fill="url(#p4)" width="100" height="100" stroke="#333"></rect>
</svg>

属性patternContentUnits指定填充内容<circle>的坐标系,也是两个值userSpaceOnUse(默认值)和objectBoundingBox,这个属性可能会让填充图案产生缩放变形

<svg viewBox="0 0  200 100" width="200" style="background: #f3f4f5;">
    <pattern width="1" height="1" id="p5" patternContentUnits="objectBoundingBox">
        <circle cx=".5" cy=".5" r=".4" fill="#acddea" />
    </pattern>
    <rect x="0" y="0"  fill="url(#p5)" width="200" height="100" stroke="#333"></rect>
</svg>

扩展阅读:
How to Use SVG Patterns
- SVG: Scalable Vector Graphics | MDN

Comments
Write a Comment