1565147 - CSS offset-path and SVG transform attribute don't work together

Status: NEW

(Core :: SVG, defect, P3)

Description

[Kari]

Attachment: offset-path-transform.svg

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:70.0) Gecko/20100101 Firefox/70.0

Steps to reproduce:

1. Open the attached "offset-path-transform.svg" test case or open this codepen: https://codepen.io/anon/pen/PrLYNw?editors=1100
2. Observe the triangles.

Actual results:

The triangles are not centered on the blue line.

Expected results:

The triangles should be centered on the blue line. Google Chrome 75 centers the triangle correctly on the blue line.

It seems that the SVG transform attribute is ignored when the offset-path CSS property is added to the element. The CSS transform property works, but SVG transform attribute doesn't work.

In addition to that, the yellow triangle is rotated wrong. Google Chrome displays it correctly. But, that is probably unrelated to the issue about the transform attribute.

Comment 1

[David Sacal]

Hi,
i've been able to reproduce the reported behavior on my end on MacOS 10.13.6. In fact on chrome the triangles are centered. I will mark this bug as new while we wait for a dev intervention

Regards
David

Comment 2

[Kari]

I filed a separate bug about the offset-path rotation, because it also fails at line segment boundaries. See bug #1565883.

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The priority flag is not set for this bug.
:jwatt, could you have a look please?

For more information, please visit auto_nag documentation.