Open Bug 1571119 Opened 2 years ago Updated 11 months ago

Support SVG path `d` attribute as a CSS Property


(Core :: CSS Parsing and Computation, enhancement)

70 Branch
Not set




(Reporter: undetectable, Unassigned)




(2 files)

Attached file bug.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0

Steps to reproduce:

Trying to change the path of an established SVG using CSS does not work. The SVG remains the same unlike on Chrome.

Actual results:

The SVG's path did not change, when a class was added to override the current path. Supposedly this was fixed in version 69, but it's not working in 70. There is an attached example. It works in the latest release of Chrome, but does not work on Firefox Nightly.

Expected results:

The SVG's path should've changed.

For the record, one is expected to click on the chevron in the demo. In Chrome it changes to point upward, in Firefox it does not.

Component: General → CSS Parsing and Computation
Attached file testcase 1

The testcase relies on setting the 'd' property on a path inside of the SVG. Here's a reduced testcase.

We did add support for some geometry properties in bug 1383650, but I'm not sure if we added the "d" property or not. Violet, do you know if this is supposed to work yet?

Flags: needinfo?(violet.bugreport)

No, we didn't. That being said we already have an SVG path parser in the style system. We should probably just switch all of them to use it, then implementing it should be straight forward.

See Also: → 1571151
Flags: needinfo?(violet.bugreport)
Summary: Changing svg paths with CSS not working in Firefox 70.0a1 → Support SVG path `d` attribute as a CSS Property
Type: defect → enhancement
Ever confirmed: true

Just wonder if this bug is related to this:
Anyway, per comment 3, it's time to think about using the same parser for both SVG path string and CSS path function.

Any updates to this?

You need to log in before you can comment on or make changes to this bug.