mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-11 13:36:13 +03:00
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.
This commit is contained in:
parent
46f42d9755
commit
a93ba23e10
Notes:
sideshowbarker
2024-07-17 07:25:39 +09:00
Author: https://github.com/MacDue Commit: https://github.com/SerenityOS/serenity/commit/a93ba23e10 Pull-request: https://github.com/SerenityOS/serenity/pull/20682
@ -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">
|
||||
|
Loading…
Reference in New Issue
Block a user