mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
a93ba23e10
The radial gradients here are rendered correctly as focal radius is zero, so the focal point is the center of the start circle.
258 lines
8.5 KiB
HTML
258 lines
8.5 KiB
HTML
<h3>Some simple SVG gradient test cases</h3>
|
|
<b>SVG radialGradient <a href="https://www.w3.org/TR/SVG11/pservers.html#ExampleRadGrad01">W3C spec example</a>:</b><br>
|
|
<svg width="8cm" height="4cm" viewBox="100 100 600 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
|
<g>
|
|
<defs>
|
|
<radialGradient id="MyGradient" gradientUnits="userSpaceOnUse"
|
|
cx="400" cy="200" r="300" fx="400" fy="200">
|
|
<stop offset="0%" stop-color="red" />
|
|
<stop offset="50%" stop-color="blue" />
|
|
<stop offset="100%" stop-color="red" />
|
|
</radialGradient>
|
|
</defs>
|
|
<rect fill="url(#MyGradient)" stroke="black" stroke-width="5" x="100" y="100" width="600" height="200"/>
|
|
</g>
|
|
</svg>
|
|
<br>
|
|
<b>SVG MDN gradientTransform example (userSpaceOnUse radialGradient)</b><br>
|
|
<svg width="400" height="190" viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
|
|
<radialGradient id="gradient1" gradientUnits="userSpaceOnUse" cx="100" cy="100" r="100" fx="100" fy="100">
|
|
<stop offset="0%" stop-color="darkblue" />
|
|
<stop offset="50%" stop-color="skyblue" />
|
|
<stop offset="100%" stop-color="darkblue" />
|
|
</radialGradient>
|
|
<radialGradient id="gradient2" gradientUnits="userSpaceOnUse" cx="320" cy="100" r="100" fx="320" fy="100" gradientTransform="skewX(20) translate(-35, 0)">
|
|
<stop offset="0%" stop-color="darkblue" />
|
|
<stop offset="50%" stop-color="skyblue" />
|
|
<stop offset="100%" stop-color="darkblue" />
|
|
</radialGradient>
|
|
<rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" />
|
|
<rect x="220" y="0" width="200" height="200" fill="url(#gradient2)"/>
|
|
</svg>
|
|
<br>
|
|
<br>
|
|
<b>MDN radialGradient example (gradientUnits=objectBoundingBox)</b>
|
|
<br>
|
|
<svg width="200" height="200"
|
|
viewBox="0 0 10 10"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<defs>
|
|
<radialGradient id="myGradient">
|
|
<stop offset="10%" stop-color="gold" />
|
|
<stop offset="95%" stop-color="red" />
|
|
</radialGradient>
|
|
</defs>
|
|
|
|
<!-- using my radial gradient -->
|
|
<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">
|
|
<defs>
|
|
<radialGradient id="gradA" gradientTransform="rotate(30 0.5 0.5)" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
|
|
<stop offset="0%" style="stop-color:white; stop-opacity:0" />
|
|
<stop offset="100%" style="stop-color:blue; stop-opacity:1" />
|
|
</radialGradient>
|
|
</defs>
|
|
<rect height="150" width="500" fill="url(#gradA)" />
|
|
</svg>
|
|
<br>
|
|
<br>
|
|
<b>radialGradient with non-centered focal point:</b><br>
|
|
<svg width="200" height="200" viewBox="0 0 200 200">
|
|
<defs>
|
|
<radialGradient id="g1" cx="50%" cy="50%" r="50%" fx="25%" fy="25%">
|
|
<stop stop-color="black" offset="0%"/>
|
|
<stop stop-color="teal" offset="50%"/>
|
|
<stop stop-color="white" offset="100%"/>
|
|
</radialGradient>
|
|
</defs>
|
|
<circle fill="url(#g1)" cx="100" cy="100" r="100"/>
|
|
</svg>
|
|
<br>
|
|
<br>
|
|
<b>Linear gradient using percentages + inline CSS, gradientUnits=objectBoundingBox</b><br>
|
|
<svg height="150" width="400">
|
|
<defs>
|
|
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
|
|
</linearGradient>
|
|
</defs>
|
|
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
|
|
</svg>
|
|
<br>
|
|
<b>Linear gradient using numbers, gradientUnits=objectBoundingBox</b><br>
|
|
<svg height="150" width="400">
|
|
<defs>
|
|
<linearGradient id="grad2" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0" stop-color="red"/>
|
|
<stop offset="1" stop-color="blue"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
|
|
</svg>
|
|
<br>
|
|
<b>Linear gradient with gradientUnits=userSpaceOnUse using numbers</b><br>
|
|
<svg height="150" width="400">
|
|
<defs>
|
|
<linearGradient id="grad3" x1="0" y1="0" x2="300" y2="0" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0" stop-color="cyan"/>
|
|
<stop offset="1" stop-color="yellow"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)" />
|
|
</svg>
|
|
<br>
|
|
<b>Linear gradient with gradientUnits=userSpaceOnUse using percentages</b><br>
|
|
<svg height="150" width="400">
|
|
<defs>
|
|
<linearGradient id="grad4" x1="0" y1="0" x2="70%" y2="0" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0" stop-color="black"/>
|
|
<stop offset="1" stop-color="orange"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad4)" />
|
|
</svg>
|
|
<br>
|
|
<b>Linear gradient scaled by viewbox</b><br>
|
|
<svg height="150" width="400" viewbox="0 0 20 20">
|
|
<defs>
|
|
<linearGradient id="grad5" x1="0" y1="0" x2="70%" y2="0" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0" stop-color="black"/>
|
|
<stop offset="1" stop-color="red"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<ellipse cx="5" cy="10" rx="10" ry="5" fill="url(#grad5)" />
|
|
</svg>
|
|
<br>
|
|
<b>Linear gradient with gradientTransform</b><br>
|
|
<svg height="150" width="400">
|
|
<defs>
|
|
<linearGradient id="grad6" x1="0" y1="0" x2="70%" y2="0" gradientTransform="rotate(30)">
|
|
<stop offset="0" stop-color="pink"/>
|
|
<stop offset="1" stop-color="purple"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<rect x="115" y="15" width="210" height="110" fill="url(#grad6)" />
|
|
</svg>
|
|
<br>
|
|
<b>Linear gradient + transform</b><br>
|
|
<svg height="150" width="400">
|
|
<defs>
|
|
<linearGradient id="grad7" x1="0" y1="0" x2="70%" y2="0">
|
|
<stop offset="0" stop-color="blue"/>
|
|
<stop offset="1" stop-color="magenta"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<rect x="115" y="15" width="170" height="110" fill="url(#grad7)" transform="rotate(45 200 70)" />
|
|
</svg>
|
|
<br>
|
|
<b>Linear gradient + transform with fill-opacity</b><br>
|
|
<svg height="150" width="400">
|
|
<defs>
|
|
<linearGradient id="grad7" x1="0" y1="0" x2="70%" y2="0">
|
|
<stop offset="0" stop-color="blue"/>
|
|
<stop offset="1" stop-color="magenta"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<rect x="115" y="15" width="170" height="110" fill="url(#grad7)" fill-opacity="0.5" transform="rotate(5 200 70)" />
|
|
</svg>
|
|
<br>
|
|
<b>Stroke linear gradient + transform</b><br>
|
|
<svg height="150" width="400">
|
|
<defs>
|
|
<linearGradient id="grad7" x1="0" y1="0" x2="70%" y2="0">
|
|
<stop offset="0" stop-color="blue"/>
|
|
<stop offset="1" stop-color="magenta"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<rect x="115" y="15" width="170" height="110" stroke="url(#grad7)" fill="none" transform="rotate(45 200 70)" />
|
|
</svg>
|
|
<br>
|
|
<b>Stroke linear gradient + transform with stroke-opacity</b><br>
|
|
<svg height="150" width="400">
|
|
<defs>
|
|
<linearGradient id="grad7" x1="0" y1="0" x2="70%" y2="0">
|
|
<stop offset="0" stop-color="blue"/>
|
|
<stop offset="1" stop-color="magenta"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<rect x="115" y="15" width="170" height="110" stroke="url(#grad7)" stroke-opacity="0.5" stroke-width="10" fill="none" transform="rotate(5 200 70)" />
|
|
</svg>
|