RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 06:17:35 +00:00
Code Issues Activity Actions

LibWeb: Fix end position for objectBoundingBox SVG <radialGradient>s

Browse source 
The translation to the bounding box location is handled by the gradient
transform, also doing it here breaks things.

This fixes the MDN <radialGradient> example.
This commit is contained in:
MacDue 2023-06-17 19:25:54 +01:00 • committed by Sam Atkins
parent 57626c4f9a
commit a910c4d984
2 changed files with 20 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -31,6 +31,24 @@
</svg> </svg>
<br> <br>
<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>
<br>
<b>Simple radialGradient gradientUnits=objectBoundingBox</b><br> <b>Simple radialGradient gradientUnits=objectBoundingBox</b><br>
<svg height="150" width="500"> <svg height="150" width="500">
<defs> <defs>

6
Userland/Libraries/LibWeb/SVG/SVGRadialGradientElement.cpp
View file

@ -136,11 +136,9 @@ Optional<Gfx::PaintStyle const&> SVGRadialGradientElement::to_gfx_paint_style(SV
// is established using the bounding box of the element to which the gradient is applied (see Object bounding box units) // is established using the bounding box of the element to which the gradient is applied (see Object bounding box units)
// and then applying the transform specified by attribute ‘gradientTransform’. Percentages represent values relative // and then applying the transform specified by attribute ‘gradientTransform’. Percentages represent values relative
// to the bounding box for the object. // to the bounding box for the object.
start_center = Gfx::FloatPoint { start_center = Gfx::FloatPoint { start_circle_x().value(), start_circle_y().value() };
start_circle_x().value(), start_circle_y().value()
};
start_radius = start_circle_radius().value(); start_radius = start_circle_radius().value();
end_center = paint_context.path_bounding_box.location() + Gfx::FloatPoint { end_circle_x().value(), end_circle_y().value() }; end_center = Gfx::FloatPoint { end_circle_x().value(), end_circle_y().value() };
end_radius = end_circle_radius().value(); end_radius = end_circle_radius().value();
} else { } else {
// GradientUnits::UserSpaceOnUse // GradientUnits::UserSpaceOnUse