使用SVG Patterns作为平铺背景

<svg width="100%" height="100%">
    <defs>
        <pattern id="polka-dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
             
            <circle fill="#bee9e8" cx="50" cy="50" r="25">
            </circle>
             
        </pattern>
    </defs>
     
    <rect x="0" y="0" width="100%" height="100%" fill="url(#polka-dots)"></rect>
</svg>

defs标签内定义一个pattern并提供一个id，让后将fill属性指向该ID的URL : fill=“url(#polka-dots)"。效果如下：

!!!

<circle fill="#bee9e8" cx="50" cy="50" r="25">
</circle>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#polka-dots)"></rect>

!!!

更多的属性可以在这里尝试

对比传统的css平铺

?CSS平铺缺点：

与位图一起使用时，它不可扩展
性能较低
更难以定制
仅限于矩形重复

?SVG模式专业人士：

轻量级
从CSS自定义
可扩展
能够创建复杂的模式

http://www.heropatterns.com/