<symbol>

Question

के साथ एसवीजी स्क्रिप्टिंग मैं जेएस में एक एसवीजी तत्व बनाने की कोशिश कर रहा हूं और इसे डीओएम में जोड़ना चाहता हूं। एसवीजी तत्व यद्यपि एक प्रतीक का संदर्भ देता है। मैं इसे insertAdjacentHTML विधि का उपयोग करके प्राप्त कर सकता हूं लेकिन appendChild विधि के माध्यम से नहीं।

appendChild का उपयोग करते समय, ब्राउज़र निरीक्षकों के अनुसार सभी सही सामान डोम पर हैं लेकिन यह सही ढंग से प्रस्तुत नहीं किया गया है। क्या कोई देख सकता है क्यों?

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

आप createElement का उपयोग कर एसवीजी तत्वों नहीं बना सकते, तो आप उन्हें एसवीजी नाम स्थान

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

insertAdjacentHTML HTML पार्सर जो जादुई तत्व नामस्थान ठीक करता है invokes में बनाने के लिए createElementNS उपयोग करना चाहिए।

इसी तरह आप xlink नामस्थान जैसे xlink: href में विशेषताओं को बनाने के लिए setAttribute का उपयोग नहीं कर सकते हैं। आप

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

वहाँ

Answer 2

चाहते मैं समाधान, .createElementNS & .setAttributeNS इस्तेमाल किया जा सकता था मिल गया।

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