RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-06-01 02:38:13 +00:00
Code Issues Activity Actions

Base: Add some examples of SVG gradients with different spreadMethods

Browse source 
The radial gradients here are rendered correctly as focal radius is
zero, so the focal point is the center of the start circle.
This commit is contained in:
MacDue 2023-08-20 15:47:01 +01:00 • committed by Andreas Kling
parent 46f42d9755
commit a93ba23e10
1 changed files with 72 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

72
Base/res/html/misc/svg-gradients.html
View file

@ -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">