so, not exactly a solution, but might get someone one step closer to implementing a fix:

specifically, if you have an element and you use createElement('circle') and append the result to the svg, it does not render. surprise! this is consistent in every browser i tested, and is not knockout-specific behavior but occurs with plain-old-javascript as well.

if you instead use createElementNS('http://www.w3.org/2000/svg', 'circle') and append the result to the svg, the circle renders just fine. surprise again!

i suspect this is a very old quirk present from when SVGs were namespace-aware (i checked multiple browsers), and suggests "magic" is performed when an SVG fragment is loaded (where the xmlns is implied for all elements within the fragment, historically SVGs were encapsulated within <script> blocks or loaded as separate documents, each having an xmlns assigned to them.) however, when createElement() is used and the element is appended it is not properly namespaced and so gets ignored (and this appears to be the expected behavior dating back to at least 2009, from what I could find.)

i tried to use knockout to set the xmlns attribute on the templated circle elements and this did not work, apparently they can't be specified on the element itself when createElement is being used (lame.)

most likely as a "fix" for this we would need a new binding that allows the specification of an xmlns for element creation via createElementNS(...) -- i wouldn't know the best way to get it implemented, probably a property needs to be added to the binding context that can be checked anywhere createElement would be called (since you'd only want this performed on a subset of nodes in the view) and then you could apply it as part of your svg/g element/tag (similar to how you leverage with or using bindings).

for example, a new binding cleverly named 'xmlns' might be obvious enough, giving us something like this:

<svg data-bind="xmlns: 'http://www.w3.org/2000/svg'">

or, given your fiddle, you could do this:

<g data-bind="xmlns: 'http://www.w3.org/2000/svg', template: { name: 'Dot', foreach: dots }"></g>

but that's going to require someone to update the source code, add tests, and get a PR merged @SteveSanderson @mbest i'd be more than happy to work with someone on this. if someone wants to collab, hit me up on discord wilson0x4d#4327 i can do the heavy lifting.

Templates don't work with SVG #2598

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions