Przeglądaj źródła

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

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.
MacDue 2 lat temu
rodzic
commit
a910c4d984

+ 18 - 0
Base/res/html/misc/svg-gradients.html

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

+ 2 - 4
Userland/Libraries/LibWeb/SVG/SVGRadialGradientElement.cpp

@@ -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_circle_x().value(), start_circle_y().value()
-        };
+        start_center = Gfx::FloatPoint { 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