Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

gradientUnits with objectBoundingBox misaligned on cubic bezier extents #87

Open
fdwr opened this issue May 18, 2022 · 0 comments
Open

Comments

@fdwr
Copy link
Contributor

fdwr commented May 18, 2022

The following reduced SVG does not show the red and tips of the gradient because the path bounds computation in LayoutObject::strokeBoundingBox just calls Path::box which computes the loose bounding box purely based on the points without regards to m_commands. That works great for clip regions of subcanvases in RenderState::beginGroup (because it's fast and light, and a few extra pixels of slack is no big deal), but it returns inaccurate extents for gradients because the bezier curve does not actually extend out as far as its control points.

image

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px">

<linearGradient id="someGradient" x1="0" x2="1" y1="0" y2="0" gradientUnits="objectBoundingBox">
  <stop offset="0" stop-color="#FF0000"/>
  <stop offset="0.05" stop-color="#FF0000"/>
  <stop offset="0.05" stop-color="#FFFF00"/>
  <stop offset="0.95" stop-color="#FFFF00"/>
  <stop offset="0.95" stop-color="#0000FF"/>
  <stop offset="1" stop-color="#0000FF"/>
</linearGradient>

<path fill="url(#someGradient)" d="M12,12 C18,6,30,6,36,12 C48,18,48,30,36,36 C30,42,18,42,12,36 C0,30,0,18,12,12 Z"/>

</svg>

I'm in no hurry for a fix - just bringing it to your attention. I'll likely have to compute accurate bounds anyway for correct grid fitting / pixel snapping of shape bounding boxes because I've found icons where the anchors are not at the left/right/top/bottom extents (e.g. see below the icons8.com fluency set forward button) which would be several pixels off otherwise. That will require me to read more though :b (https://floris.briolas.nl/floris/2009/10/bounding-box-of-cubic-bezier/), and then I can try applying it to gradients too...

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant