Not rendering multiple SVG elements

[antstanley]

When I have multiple svg elements in a component it is only rendering the first element correctly, but subsequent elements are not rendered. Looked into the compiled code, and it uses createElementNS as shown below to create the first svg element

var svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );

but subsequent svg's don't use the createElementNS and just use createElement without specifying the svg schema like below.

var svg2 = document.createElement( 'svg' );

All nested elements below the svg elements will follow the convention of the parent element.

[antstanley]

Ok... found the problem! It's in https://github.com/sveltejs/svelte/blob/master/compiler/generate/visitors/Element.js

The piece of code that evaluates whether the element is an svg evaluates on the exact match on the string 'svg'. The first svg element passed to this function will have the name 'svg', but subsequent svg elements will be numbered. ie 'svg2', 'svg3'. So the subsequent elements fail the test as they do not match 'svg' exactly.

The following change is needed to fix it.

Original

const local = { name, namespace: name === 'svg' ? 'http://www.w3.org/2000/svg' : generator.current.namespace,

new code

const local = { name, namespace: name.substring(0,3) === 'svg' ? 'http://www.w3.org/2000/svg' : generator.current.namespace,

Essentially changing the evaluation to the first three letters of the element name, and not the whole name.

[Rich-Harris]

Thanks! Fixed in 1.1.1

[antstanley]

Ha! Just submitted a pull request to fix this.. will cancel it! You're too quick! Thank you!

[Ryuno-Ki]

Bear in mind, that this should affect other SVG elements like rect or g as well. Those need to be created with createElementNS as well (learned that at this year's js13kgames :-))