Svelte: Rehydrating SVG: Cannot assign to read only property

[btakita]

Uncaught (in promise) TypeError: Cannot assign to read only property 'width' of object '#<SVGSVGElement>'

[btakita]

It seems like this occurs when there are spread attributes with read-only props on SVGSVGElement

https://svelte.dev/repl/759086cf15ec4220ac67ab039e1388d2?version=3.2.2

[EmilTholin]

If set_attributes is changed to only use setAttribute instead of directly assigning a new value on an existing node property as an experiment, it works as expected.

export function set_attributes(node, attributes) {
  for (const key in attributes) {
    if (key === "style") {
      node.style.cssText = attributes[key];
-   } else if (key in node) {
-     node[key] = attributes[key];
    } else {
      attr(node, key, attributes[key]);
    }
  }
}

I'm not sure what's the best way forward.

[btakita]

Here's the repro...

https://svelte.dev/repl/2007a434ab2447e18f581ba51964f6b6?version=3.4.1

[btakita]

@EmilTholin Some tests failed when removing node[key] = attributes[key];, so I used a try/catch in the PR...

export function set_attributes(node, attributes) {
    for (const key in attributes) {
        if (key === 'style') {
            node.style.cssText = attributes[key];
        } else if (key in node) {
            try {
                node[key] = attributes[key];
            } catch (e) {
                attr(node, key, attributes[key]);
            }
        } else {
            attr(node, key, attributes[key]);
        }
    }
}

[btakita]

I have not figured out how to create a failing test for this scenario...other than the repl.

[btakita]

Pinging this issue. I just realized that if this fix would allow a preprocessor for *.svg files to be svelte components with overridable attributes.

In this example, the svg:

<svg viewBox="0 0 512 512" stroke="#D9534F">
<!--...-->
</svg>

would generate:

<svelte:options namespace="svg"></svelte:options>
<svg viewBox="0 0 512 512" stroke="#D9534F" {...$$props}>
<!--...-->
</svg>

The component would have a default stroke of #D9534F. This stroke can be overridden with the stroke attribute passed to the component.

<SVG_Component stroke="#00FF00"></SVG_Component>

[Rich-Harris]

Fixed in 3.10.1 (finally!)