Preact: 'markerWidth' and 'markerHeight' svg attributes getting converted to 'marker-width' and 'marker-height'

[moklick]

The SVG attributes markerWidth and markerHeight getting converted to marker-width and marker-height which are invalid attributes.

Input:

<marker id="arrow" viewBox="-10 -10 20 20" markerWidth="20" markerHeight="20" />

Preact output:

<marker id="arrow" viewBox="-10 -10 20 20" marker-width="20" marker-height="20" />

[marvinhagemeister]

To add to the above: The expect output is that the attribute names are not changed in casing. See the pages on MDN:

• markerWidth
• markerHeight

[marvinhagemeister]

...and here is a page with all SVG attributes https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute 🎉✌️

[ddayguerrero]

👋 Curious about looking into this and I'm unable to reproduce on version 10.3.4.

In my sandbox, I'm still getting markerWidth and markerHeight as rendered attributes.

Also not aware of particular normalization conditions with SVG when creating elements https://github.com/preactjs/preact/blob/master/src/create-element.js#L11.

I might be missing something but would be glad to help!

[JoviDeCroock]

Hey @ddayguerrero

These normalizations happen in our compat-layer and will only be there if you use preact/compat https://github.com/preactjs/preact/blob/master/compat/src/render.js#L137

[ddayguerrero]

Oh, missed that. Thanks for the guidance! 🙇

[jamesb3ll]

Are you using the latest version of Preact? This was fixed in v10.3.3 with https://github.com/preactjs/preact/pull/2366
If you have a look at the tests it covers this test case for markerWidth and markerHeight 🙂

[marvinhagemeister]

@jamesb3ll good catch :+1:

@moklick are you sure that you are using the latest version of Preact?

[moklick]

oh no.. I was using v10.3.2.