Base: Add some examples of SVG gradients with different spreadMethods

The radial gradients here are rendered correctly as focal radius is
zero, so the focal point is the center of the start circle.

Base/res/html/misc/svg-gradients.html

@@ -48,6 +48,78 @@
   <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
 </svg>
 <br>
+<b>MDN spreadMethod example:</b><br/>
+<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient
+      id="GradientPad"
+      cx="0.5"
+      cy="0.5"
+      r="0.4"
+      fx="0.75"
+      fy="0.75"
+      spreadMethod="pad">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </radialGradient>
+    <radialGradient
+      id="GradientRepeat"
+      cx="0.5"
+      cy="0.5"
+      r="0.4"
+      fx="0.75"
+      fy="0.75"
+      spreadMethod="repeat">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </radialGradient>
+    <radialGradient
+      id="GradientReflect"
+      cx="0.5"
+      cy="0.5"
+      r="0.4"
+      fx="0.75"
+      fy="0.75"
+      spreadMethod="reflect">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </radialGradient>
+  </defs>
+  <rect
+    x="10"
+    y="10"
+    rx="15"
+    ry="15"
+    width="100"
+    height="100"
+    fill="url(#GradientPad)" />
+  <rect
+    x="10"
+    y="120"
+    rx="15"
+    ry="15"
+    width="100"
+    height="100"
+    fill="url(#GradientRepeat)" />
+  <rect
+    x="120"
+    y="120"
+    rx="15"
+    ry="15"
+    width="100"
+    height="100"
+    fill="url(#GradientReflect)" />
+  <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">
+    Pad
+  </text>
+  <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">
+    Repeat
+  </text>
+  <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">
+    Reflect
+  </text>
+</svg>
+<br>
 <br>
 <b>Simple radialGradient gradientUnits=objectBoundingBox</b><br>
 <svg height="150" width="500">