Tập lệnh SVG với <symbol>

Question

Tôi đang cố gắng tạo phần tử SVG trong JS rồi thêm phần đó vào DOM. Phần tử SVG tham chiếu đến một biểu tượng. Tôi có thể đạt được điều này bằng cách sử dụng phương pháp insertAdjacentHTML nhưng không thông qua phương pháp appendChild.

Khi sử dụng appendChild, tất cả nội dung phù hợp đều nằm trên DOM theo trình kiểm tra của trình duyệt nhưng không được hiển thị chính xác. Ai có thể thấy tại sao không?

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

Bạn không thể tạo các yếu tố SVG sử dụng createElement, bạn phải sử dụng createElementNS để tạo ra chúng trong không gian tên SVG

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

insertAdjacentHTML gọi bộ phân tích html mà kỳ diệu ấn định không gian tên phần tử.

Tương tự, bạn không thể sử dụng setAttribute để tạo thuộc tính trong vùng tên xlink chẳng hạn như xlink: href. Bạn muốn

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

có

Answer 2

Tôi tìm thấy giải pháp, .createElementNS & .setAttributeNS phải được sử dụng.

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');