LibWeb: Apply SVG transform to path when painting (SVG) elements

This also combines the viewbox mapping into the same transform and
reuses some code by using Path::copy_transformed() rather than manually
mapping each segment of the path.

Userland/Libraries/LibWeb/Layout/SVGGeometryBox.cpp

@@ -17,27 +17,6 @@ SVGGeometryBox::SVGGeometryBox(DOM::Document& document, SVG::SVGGeometryElement&
 {
 }
 
-float SVGGeometryBox::viewbox_scaling() const
-{
-    auto* svg_box = dom_node().first_ancestor_of_type<SVG::SVGSVGElement>();
-
-    if (!svg_box || !svg_box->view_box().has_value())
-        return 1;
-
-    auto view_box = svg_box->view_box().value();
-
-    bool has_specified_width = svg_box->has_attribute(HTML::AttributeNames::width);
-    auto specified_width = paint_box()->content_width().value();
-
-    bool has_specified_height = svg_box->has_attribute(HTML::AttributeNames::height);
-    auto specified_height = paint_box()->content_height().value();
-
-    auto scale_width = has_specified_width ? specified_width / view_box.width : 1;
-    auto scale_height = has_specified_height ? specified_height / view_box.height : 1;
-
-    return min(scale_width, scale_height);
-}
-
 CSSPixelPoint SVGGeometryBox::viewbox_origin() const
 {
     auto* svg_box = dom_node().first_ancestor_of_type<SVG::SVGSVGElement>();
@@ -46,6 +25,28 @@ CSSPixelPoint SVGGeometryBox::viewbox_origin() const
     return { svg_box->view_box().value().min_x, svg_box->view_box().value().min_y };
 }
 
+Gfx::AffineTransform SVGGeometryBox::layout_transform() const
+{
+    auto& geometry_element = dom_node();
+    auto transform = geometry_element.get_transform();
+    auto* svg_box = geometry_element.first_ancestor_of_type<SVG::SVGSVGElement>();
+    float scaling = 1;
+    auto origin = viewbox_origin().to_type<float>();
+    Gfx::FloatPoint paint_offset = {};
+    if (svg_box && svg_box->view_box().has_value()) {
+        // Note: SVGFormattingContext has already done the scaling based on the viewbox,
+        // we now have to derive what it was from the original bounding box size.
+        // FIXME: It would be nice if we could store the transform from layout somewhere, so we don't have to solve for it here.
+        auto scaled_width = paint_box()->content_width().value();
+        auto scaled_height = paint_box()->content_height().value();
+        auto original_bounding_box = Gfx::AffineTransform {}.translate(-origin).multiply(transform).map(const_cast<SVG::SVGGeometryElement&>(geometry_element).get_path().bounding_box());
+        scaling = min(scaled_width / original_bounding_box.width(), scaled_height / original_bounding_box.height());
+        auto scaled_bounding_box = original_bounding_box.scaled(scaling, scaling);
+        paint_offset = (paint_box()->absolute_rect().location() - svg_box->paint_box()->absolute_rect().location()).to_type<float>() - scaled_bounding_box.location();
+    }
+    return Gfx::AffineTransform {}.translate(paint_offset).scale(scaling, scaling).translate(-origin).multiply(transform);
+}
+
 JS::GCPtr<Painting::Paintable> SVGGeometryBox::create_paintable() const
 {
     return Painting::SVGGeometryPaintable::create(*this);

Userland/Libraries/LibWeb/Layout/SVGGeometryBox.h

@@ -21,12 +21,13 @@ public:
     SVG::SVGGeometryElement& dom_node() { return static_cast<SVG::SVGGeometryElement&>(SVGGraphicsBox::dom_node()); }
     SVG::SVGGeometryElement const& dom_node() const { return static_cast<SVG::SVGGeometryElement const&>(SVGGraphicsBox::dom_node()); }
 
-    float viewbox_scaling() const;
-    CSSPixelPoint viewbox_origin() const;
+    Gfx::AffineTransform layout_transform() const;
 
     virtual JS::GCPtr<Painting::Paintable> create_paintable() const override;
 
 private:
+    CSSPixelPoint viewbox_origin() const;
+
     virtual bool is_svg_geometry_box() const final { return true; }
 };
 

Userland/Libraries/LibWeb/Painting/SVGGeometryPaintable.cpp

@@ -1,5 +1,6 @@
 /*
  * Copyright (c) 2018-2022, Andreas Kling <kling@serenityos.org>
+ * Copyright (c) 2023, MacDue <macdue@dueutil.tech>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -49,50 +50,7 @@ void SVGGeometryPaintable::paint(PaintContext& context, PaintPhase phase) const
 
     context.painter().add_clip_rect(context.enclosing_device_rect(absolute_rect()).to_type<int>());
 
-    Gfx::Path path = const_cast<SVG::SVGGeometryElement&>(geometry_element).get_path();
-
-    if (maybe_view_box.has_value()) {
-        Gfx::Path new_path;
-        auto scaling = layout_box().viewbox_scaling();
-        auto origin = layout_box().viewbox_origin();
-
-        auto transform_point = [&scaling, &origin](Gfx::FloatPoint point) -> Gfx::FloatPoint {
-            auto new_point = point;
-            new_point.translate_by({ -origin.x(), -origin.y() });
-            new_point.scale_by(scaling);
-            return new_point;
-        };
-
-        for (auto& segment : path.segments()) {
-            switch (segment->type()) {
-            case Gfx::Segment::Type::Invalid:
-                break;
-            case Gfx::Segment::Type::MoveTo:
-                new_path.move_to(transform_point(segment->point()));
-                break;
-            case Gfx::Segment::Type::LineTo:
-                new_path.line_to(transform_point(segment->point()));
-                break;
-            case Gfx::Segment::Type::QuadraticBezierCurveTo: {
-                auto& quadratic_bezier_segment = static_cast<Gfx::QuadraticBezierCurveSegment const&>(*segment);
-                new_path.quadratic_bezier_curve_to(transform_point(quadratic_bezier_segment.through()), transform_point(quadratic_bezier_segment.point()));
-                break;
-            }
-            case Gfx::Segment::Type::CubicBezierCurveTo: {
-                auto& cubic_bezier_segment = static_cast<Gfx::CubicBezierCurveSegment const&>(*segment);
-                new_path.cubic_bezier_curve_to(transform_point(cubic_bezier_segment.through_0()), transform_point(cubic_bezier_segment.through_1()), transform_point(cubic_bezier_segment.point()));
-                break;
-            }
-            case Gfx::Segment::Type::EllipticalArcTo: {
-                auto& elliptical_arc_segment = static_cast<Gfx::EllipticalArcSegment const&>(*segment);
-                new_path.elliptical_arc_to(transform_point(elliptical_arc_segment.point()), elliptical_arc_segment.radii().scaled_by(scaling, scaling), elliptical_arc_segment.x_axis_rotation(), elliptical_arc_segment.large_arc(), elliptical_arc_segment.sweep());
-                break;
-            }
-            }
-        }
-
-        path = new_path;
-    }
+    Gfx::Path path = const_cast<SVG::SVGGeometryElement&>(geometry_element).get_path().copy_transformed(Gfx::AffineTransform {}.multiply(layout_box().layout_transform()));
 
     if (auto fill_color = geometry_element.fill_color().value_or(svg_context.fill_color()); fill_color.alpha() > 0) {
         // We need to fill the path before applying the stroke, however the filled