这里的基本思想是用一个点划线把四个有自己线性渐变的矩形遮盖起来。渐变在角上互相重叠，所以看起来像是一个连续渐变。
遮罩m1中的虚线笔划具有圆形线帽，然后另一遮罩（m2）遮蔽该笔划的一半。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"
  width="500">
  <defs>
    <linearGradient id="top">
      <stop offset="10%" stop-color="DarkViolet"/>
      <stop offset="90%" stop-color="DeepSkyBlue"/>
    </linearGradient>
    <linearGradient id="right" gradientTransform="rotate(90)">
      <stop offset="10%" stop-color="DeepSkyBlue"/>
      <stop offset="50%" stop-color="Green"/>
      <stop offset="90%" stop-color="Yellow"/>
    </linearGradient>
    <linearGradient id="bottom">
      <stop offset="10%" stop-color="Red"/>
      <stop offset="50%" stop-color="Orange"/>
      <stop offset="90%" stop-color="Yellow"/>
    </linearGradient>
    <linearGradient id="left" gradientTransform="rotate(90)">
      <stop offset="10%" stop-color="DarkViolet"/>
      <stop offset="90%" stop-color="Red"/>
    </linearGradient>
    <mask id="m1">
      <rect x="4" y="4" rx="20" width="392" height="292"
        mask="url(#m2)" stroke="white" stroke-width="8"
        stroke-dasharray="5 5 10 5 7 4" stroke-linecap="round"
        pathLength="400" filter="url(#distort)" />
    </mask>
    <mask id="m2">
      <rect x="4" y="4" rx="20" width="392" height="292" fill="white" />
    </mask>
  </defs>
  <g mask="url(#m1)">
    <rect width="400" height="20" fill="url(#top)"/>
    <rect width="20" height="300" x="380" fill="url(#right)"/>
    <rect width="400" height="20" y="280" fill="url(#bottom)"/>
    <rect width="20" height="300" fill="url(#left)"/>
  </g>
</svg>