<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)"。
效果如下:

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

对比传统的css平铺

😡CSS平铺缺点:

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

😀SVG模式专业人士:

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

http://www.heropatterns.com/