Skrypty SVG z

Question

Próbuję utworzyć element SVG w JS, a następnie dołączyć go do DOM. Element SVG odwołuje się jednak do symbolu. Mogę to osiągnąć za pomocą metody insertAdjacentHTML, ale nie za pomocą metody appendChild.

Podczas korzystania z appendChild wszystkie właściwe elementy znajdują się w DOM według inspektorów przeglądarki, ale nie są renderowane poprawnie. Czy ktoś może zrozumieć, dlaczego?

http://codepen.io/bradjohnwoods/pen/dGpqMb?editors=101

<svg display="none"> 
    <symbol id="symbol--circle--ripple" viewBox="0 0 100 100"> 
    <circle cx="50" cy="50" r="25" /> 
    </symbol> 
</svg> 

<button id="btn"> 
</button> 

<script> 
var btn = document.getElementById('btn'); 

//var myString = '<svg><use xlink:href="#symbol--circle--ripple" width="100" height="100" class="btn--ripple__circle"></use></svg>'; 
//btn.insertAdjacentHTML('afterbegin', myString); 

var svg = document.createElement('svg'); 
var use = document.createElement('use'); 
use.setAttribute("xlink:href", "#symbol--circle--ripple"); 
use.setAttribute("width", "100"); 
use.setAttribute("height", "100"); 
use.classList.add("btn--ripple__circle"); 

svg.appendChild(use); 
btn.appendChild(svg); 
</script> 

Answer 1

Nie można tworzyć elementy SVG używając createElement, należy użyć createElementNS je tworzyć w przestrzeni nazw SVG

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

insertAdjacentHTML wywołuje parser HTML, który w magiczny sposób rozwiązuje przestrzeni nazw elementu.

Podobnie nie można użyć funkcji setAttribute do tworzenia atrybutów w przestrzeni nazw xlink, takich jak xlink: href. Chcesz

setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#symbol--circle--ripple"); 

tam

Answer 2

znalazłem rozwiązanie, .createElementNS & .setAttributeNS miały być użyte.

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 
var use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); 
use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#symbol--circle--ripple');