yisibl/resvg-js

Polyline/polygon bounding box cuts off part of miter joint

ANSH3LL opened this issue · 6 comments

ANSH3LL commented

The tips of miter joints in polygons, polylines and paths are cut-off when Crop by BBox is selected.
Rect shapes rotated 45 degrees are also affected when stroke is applied.
It seems that the bbox calculations do not include the full length of the miter.
This might be a bug in the underlying resvg library, but I'm not sure how resvg-js performs cropping.

Polyline: Before cropping

polyline-not-cropped

Polyline: After cropping

polyline-cropped

Path: Before cropping

path-not-cropped

Path: After cropping

path-cropped

Rotated rect: Before cropping

rect-not-cropped

Rotated rect: After cropping

rect-cropped

Polyline svg 
<svg viewBox="18 8 43 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polyline points="60 20 20 20 30 30 30 10 40 20" fill="none" stroke="black" stroke-linejoin="miter" />
</svg>
Path svg 
<svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg">
  <path
    stroke="black"
    fill="none"
    stroke-linejoin="miter"
    stroke-miterlimit="8"
    d="M1,29 l7   ,-3 l7   ,3
       m2, 0 l3.5 ,-3 l3.5 ,3
       m2, 0 l2   ,-3 l2   ,3
       m2, 0 l0.75,-3 l0.75,3
       m2, 0 l0.5 ,-3 l0.5 ,3" />
</svg>
Rect svg 
<svg width="31" height="31" xmlns="http://www.w3.org/2000/svg">
  <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" stroke="pink" stroke-width="2" />
</svg>
yisibl commented

Yes, it could be an upstream problem. You need to clone the latest resvg and run:

cargo run --example draw_bboxes -- bbox.svg bbox.png -z 10

You'll see that the bbox has a red border.

By the way, in what scenarios do you use Crop by BBox?

ANSH3LL commented

I use it when generating shapes programmatically so that I don't have to calculate the svg viewbox.

ANSH3LL commented

It appears that the problem is in resvg. The polyline svg's bbox is especially broken. Maybe @RazrFalcon can look into this?

s

s2

s3

ANSH3LL commented

Also, what is the difference between the green and red borders?

RazrFalcon commented

Path bbox calculation is correct. The draw_bbox example glitches out on Polyline svg because it ignores the viewbox transform. I've updated the example code to fix it just now.

Red rectangle - path bbox.
Green rectangle - path bbox including stroke.

Meaning the issue is with the way resvg-js reinterprets resvg/usvg output.

  • 👍1
yisibl commented

Meaning the issue is with the way resvg-js reinterprets resvg/usvg output.

Yes, This requires resvg-js to update resvg to the latest version.