SVG pattern

<svg width="240" height="160">
    <defs>
        <pattern id="p" patternUnits="userSpaceOnUse" width="60" height="60">
            <rect width="30" height="30" fill="#f99" x="0" y="0"></rect>
        </pattern>
    </defs>
    <rect width="240" height="160" stroke="#aaa" fill="url(#p)" />
    <rect width="60" height="60" x="1" y="1" stroke="#00f" stroke-width="2" fill="url(#p)" />
</svg>

image.png

<svg width="240" height="160">
    <defs>
        <pattern id="p" patternUnits="userSpaceOnUse" width="40" height="40">
            <rect width="30" height="30" fill="#f99" x="0" y="0"></rect>
        </pattern>
    </defs>
    <rect width="240" height="160" stroke="#aaa" fill="url(#p)" />
    <rect width="60" height="60" x="1" y="1" stroke="#00f" stroke-width="2" fill="url(#p)" />
</svg>

image.png

patternUnits

• userSpaceOnUse
  这也是默认值
  上面的demo中width与height就是实际的宽高，pattern内的rect内的x与就是在width=60与height=60坐标内填充,

• objectBoundingBox
  使用这个时，width与height就是比例

<svg width="240" height="160">
    <defs>
        <pattern id="p" patternUnits="objectBoundingBox" width="1" height="1">
            <rect width="30" height="30" fill="#f99" x="0" y="0"></rect>
        </pattern>
    </defs>
    <rect width="100" height="100" x="10" y="30" stroke="#000" stroke-width="2" fill="url(#p)" />
</svg>

这里的pattern实际的宽度是100（rect的width）乘以1后的结果，就是100px，只能填充rect一个

image.png

<svg width="240" height="160">
    <defs>
        <pattern id="p" patternUnits="objectBoundingBox" width="0.4" height="0.4">
            <rect width="30" height="30" fill="#f99" x="0" y="0"></rect>
        </pattern>
    </defs>
    <rect width="100" height="100" x="10" y="30" stroke="#000" stroke-width="2" fill="url(#p)" />
</svg>

width=0.4后的实际宽度是100*0.4 = 40px

image.png

<svg width="240" height="160">
    <defs>
    <pattern id="p" patternUnits="objectBoundingBox" width=".4" height=".4">
        <rect width="30" height="30" fill="#f99" x="0" y="0"></rect>
    </pattern>
    </defs>
    <rect width="80" height="80" x="120" y="30" stroke="#000" stroke-width="2" fill="url(#p)" />
    <rect width="100" height="100" x="10" y="30" stroke="#000" stroke-width="2" fill="url(#p)" />
</svg>

两个rect宽度不同，乘以0.4后的结果也是不一样

image.png

patternContentUnits

与patternUnits作用一致，只不过patternContentUnits对应的

<svg width="240" height="160">
    <defs>
        <pattern id="p1" patternUnits="objectBoundingBox" width=".4" height=".4" patternContentUnits="userSpaceOnUse">
            <rect width="20" height="20" fill="#f99" x="0" y="0"></rect>
        </pattern>
        <pattern id="p2" patternUnits="objectBoundingBox" width=".4" height=".4" patternContentUnits="objectBoundingBox">
            <rect width=".2" height=".2" fill="#f99" x="0" y="0"></rect>
        </pattern>
    </defs>
    <rect width="100" height="100" x="10" y="30" stroke="#000" stroke-width="2" fill="url(#p1)" />
    <rect width="100" height="100" x="120" y="30" stroke="#000" stroke-width="2" fill="url(#p2)" />
</svg>

效果看起来一样，第一个矩形是1000.4 = 40px,只不过pattern内的矩形长宽都是20px
第二个是pattern的长宽是1000.4 = 40px，但是第二个pattern内的rect的长宽却是100*0.2 = 20px

image.png

<svg width="240" height="160">
    <defs>
        <pattern id="p1" patternUnits="objectBoundingBox" width=".4" height=".4" patternContentUnits="userSpaceOnUse">
            <rect width="20" height="20" fill="#f99" x="0" y="0"></rect>
        </pattern>
        <pattern id="p2" patternUnits="objectBoundingBox" width=".5" height=".5" patternContentUnits="objectBoundingBox">
            <rect width=".2" height=".2" fill="#f99" x="0" y="0"></rect>
        </pattern>
    </defs>

    <rect width="100" height="100" x="10" y="30" stroke="#000" stroke-width="2" fill="url(#p1)" />
    <rect width="100" height="100" x="120" y="30" stroke="#000" stroke-width="2" fill="url(#p2)" />
</svg>

image.png

patternTransform

<svg width="240" height="160">
    <defs>
        <pattern id="p1" patternUnits="objectBoundingBox" width=".1" height=".4" >
            <rect width="5" height="50" fill="#000" x="0" y="0"></rect>
            <rect width="5" height="50" fill="#f99" x="5" y="0"></rect>
        </pattern>
    </defs>
    <rect width="100" height="100" x="10" y="30" stroke="#000" stroke-width="1" fill="url(#p1)" />
</svg>

image.png

<svg width="240" height="160">
    <defs>
        <pattern id="p1" patternUnits="objectBoundingBox" width=".1" height=".4" patternTransform="rotate(45)">
            <rect width="5" height="50" fill="#000" x="0" y="0"></rect>
            <rect width="5" height="50" fill="#f99" x="5" y="0"></rect>
        </pattern>
    </defs>
    <rect width="100" height="100" x="10" y="30" stroke="#000" stroke-width="1" fill="url(#p1)" />
</svg>

image.png

参考