使用SVG属性patternTransform创建三角背景

使用SVG属性patternTransform创建三角背景，可通过patternTransform的rotate设置旋转度数。

<svg 
  width="100%" height="100%"
  viewBox="0 0 10 10" 
  preserveAspectRatio="xMidYMid slice"
>
  <defs>
    <pattern
      id="pattern"
      viewBox="0 0 10 10"
      patternTransform="rotate(45)"
      width="6%" height="6%"
    >
      <g stroke-width=".2" stroke="#000">
        <rect width="100%" height="100%" 
              x="0.10" y="0.10" fill="crimson" />
        <rect width="100%" height="100%" 
              x="1.77" y="1.77" fill="darkorange" />
        <rect width="100%" height="100%" 
              x="3.44" y="3.44" fill="gold" />
        <rect width="100%" height="100%" 
              x="5.10" y="5.10" fill="forestgreen" />
        <rect width="100%" height="100%" 
              x="6.77" y="6.77" fill="royalblue" />
        <rect width="100%" height="100%" 
              x="8.45" y="8.45" fill="rebeccapurple" />
      </g>
    </pattern>
  </defs>
  
  <rect width="100%" height="100%" fill="url(#pattern)" />
</svg>

具体效果如下：

出处：https://www.mabangzhu.com/jquery/2766.html