render svg tag does not work
Closed this issue · 1 comments
gutenye commented
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
gera2ld commented
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>));