violentmonkey/vm-dom

render svg tag does not work

Closed this issue · 1 comments

The Problem

render <svg viewBox="0 0 24 24">..</svg>
returns <svg viewbox="0 0 24 24">..</svg>   # the viewbox case is lowered

The Cause

svg is XML element, it's case-sensitive, unlike HTML element. see more here, that means we need to use document.createElementNS('http://www.w3.org/2000/svg', 'svg'); to create svg element instead of document.createElementNS('http://www.w3.org/1999/xhtml', 'svg');, need to fix the code here

How to fix

React is using parentNamespace

SVG is supported in @violentmoney/vm-dom@2, also based on parent namespace.
However the usage is changed, JSX needs to be wrapped with VM.m, for example:

document.body.append(VM.m(<div>hello</div>));
document.body.append(VM.m(<svg viewBox="0 0 24 24">..</svg>));