From 7dacf2c4d471c9e7dc73963f9fefd64f2993cd2d Mon Sep 17 00:00:00 2001 From: Paolo Ricciuti Date: Thu, 23 May 2024 22:25:11 +0200 Subject: [PATCH] fix: use svg methods for updating svg attributes too (#11755) Closes #11746 we were using the svg methods for every child of svg but not for svg itself --- .changeset/green-snails-tickle.md | 5 +++++ .../3-transform/client/visitors/template.js | 2 +- .../svg-element-attribute-serialize/_config.js | 18 ++++++++++++++++++ .../main.svelte | 8 ++++++++ 4 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 .changeset/green-snails-tickle.md create mode 100644 packages/svelte/tests/runtime-runes/samples/svg-element-attribute-serialize/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/svg-element-attribute-serialize/main.svelte diff --git a/.changeset/green-snails-tickle.md b/.changeset/green-snails-tickle.md new file mode 100644 index 0000000000..c7a63dd991 --- /dev/null +++ b/.changeset/green-snails-tickle.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: use svg methods for updating svg attributes too diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js index 17897db214..3fd4c50fa5 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js @@ -472,7 +472,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) { function serialize_element_attribute_update_assignment(element, node_id, attribute, context) { const state = context.state; const name = get_attribute_name(element, attribute, context); - const is_svg = context.state.metadata.namespace === 'svg'; + const is_svg = context.state.metadata.namespace === 'svg' || element.name === 'svg'; const is_mathml = context.state.metadata.namespace === 'mathml'; let [contains_call_expression, value] = serialize_attribute_value(attribute.value, context); diff --git a/packages/svelte/tests/runtime-runes/samples/svg-element-attribute-serialize/_config.js b/packages/svelte/tests/runtime-runes/samples/svg-element-attribute-serialize/_config.js new file mode 100644 index 0000000000..a22b192320 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/svg-element-attribute-serialize/_config.js @@ -0,0 +1,18 @@ +import { flushSync } from '../../../../src/index-client'; +import { test, ok } from '../../test'; + +export default test({ + mode: ['client'], + test({ assert, target }) { + const svg = target.querySelector('svg'); + const button = target.querySelector('button'); + ok(svg); + ok(button); + + assert.equal(svg.getAttribute('class'), '0'); + flushSync(() => { + button.click(); + }); + assert.equal(svg.getAttribute('class'), '1'); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/svg-element-attribute-serialize/main.svelte b/packages/svelte/tests/runtime-runes/samples/svg-element-attribute-serialize/main.svelte new file mode 100644 index 0000000000..9bf059ba7f --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/svg-element-attribute-serialize/main.svelte @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file