computed-style-to-inline-style
computed-style-to-inline-style copied to clipboard
SVG <rect> changes size in Chrome
If you have an SVG element with width
and height
attributes (not style) it seems Chrome reports the computed width
and height
as auto
, which overrides the attributes when using computed-style-to-inline-style
Demo: https://jsfiddle.net/uqL9hxnk/1/
This doesn't happen in Safari or Firefox, so maybe it's a bug in Chrome. It would be nice if computed-style-to-inline-style
worked around it though.
The following workaround works in my case:
for (const attribute of ["width", "height"]) {
for (const rect of element.querySelectorAll(`svg [${attribute}]`)) {
rect.style[attribute] = "";
}
}