mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 04:17:35 +00:00
LibWeb: Scale SVG stroke-width based on viewbox
This fixes the clipping of strokes in quite a few cases and now fixes the Gartic Phone logo :^) (Layout test updated but no visible changes there)
This commit is contained in:
parent
cb79c6bc2f
commit
f9c61e3ba7
5 changed files with 33 additions and 21 deletions
|
@ -87,7 +87,7 @@ void SVGFormattingContext::run(Box const& box, LayoutMode, [[maybe_unused]] Avai
|
|||
|
||||
// Stroke increases the path's size by stroke_width/2 per side.
|
||||
auto path_bounding_box = transform.map(path.bounding_box()).to_type<CSSPixels>();
|
||||
CSSPixels stroke_width = geometry_box.dom_node().stroke_width().value_or(0);
|
||||
CSSPixels stroke_width = geometry_box.dom_node().visible_stroke_width() * viewbox_scale;
|
||||
path_bounding_box.inflate(stroke_width, stroke_width);
|
||||
geometry_box_state.set_content_offset(path_bounding_box.top_left() + offset);
|
||||
geometry_box_state.set_content_width(path_bounding_box.width());
|
||||
|
|
|
@ -38,6 +38,8 @@ Optional<Gfx::AffineTransform> SVGGeometryBox::layout_transform() const
|
|||
// 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 original_bounding_box = Gfx::AffineTransform {}.translate(-origin).multiply(transform).map(const_cast<SVG::SVGGeometryElement&>(geometry_element).get_path().bounding_box());
|
||||
float stroke_width = geometry_element.visible_stroke_width();
|
||||
original_bounding_box.inflate(stroke_width, stroke_width);
|
||||
// If the transform (or path) results in a empty box we can't display this.
|
||||
if (original_bounding_box.is_empty())
|
||||
return {};
|
||||
|
|
|
@ -71,7 +71,9 @@ void SVGGeometryPaintable::paint(PaintContext& context, PaintPhase phase) const
|
|||
auto transform = layout_box().layout_transform();
|
||||
if (!transform.has_value())
|
||||
return;
|
||||
Gfx::Path path = const_cast<SVG::SVGGeometryElement&>(geometry_element).get_path().copy_transformed(Gfx::AffineTransform {}.scale(css_scale, css_scale).multiply(*transform));
|
||||
|
||||
auto paint_transform = Gfx::AffineTransform {}.scale(css_scale, css_scale).multiply(*transform);
|
||||
Gfx::Path path = const_cast<SVG::SVGGeometryElement&>(geometry_element).get_path().copy_transformed(paint_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
|
||||
|
@ -91,7 +93,8 @@ void SVGGeometryPaintable::paint(PaintContext& context, PaintPhase phase) const
|
|||
painter.stroke_path(
|
||||
path,
|
||||
stroke_color,
|
||||
geometry_element.stroke_width().value_or(svg_context.stroke_width()) * context.device_pixels_per_css_pixel());
|
||||
// Note: This is assuming .x_scale() == .y_scale() (which it does currently).
|
||||
geometry_element.stroke_width().value_or(svg_context.stroke_width()) * paint_transform.x_scale());
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -28,6 +28,13 @@ public:
|
|||
Optional<Gfx::Color> stroke_color() const;
|
||||
Optional<float> stroke_width() const;
|
||||
|
||||
float visible_stroke_width() const
|
||||
{
|
||||
if (auto color = stroke_color(); color.has_value() && color->alpha() > 0)
|
||||
return stroke_width().value_or(0);
|
||||
return 0;
|
||||
}
|
||||
|
||||
Gfx::AffineTransform get_transform() const;
|
||||
|
||||
protected:
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue