javascript - SVG scripting with <symbol> - Stack Overflow

admin管理员组

文章数量:1418589

I'm trying to create a SVG element in JS then append it to the DOM. The SVG element references a symbol though. I can achieve this using the insertAdjacentHTML method but not through appendChild method.

When using appendChild, all the right stuff is on the DOM according to browser inspectors but it's not rendered correctly. Can anyone see why?

<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>

I'm trying to create a SVG element in JS then append it to the DOM. The SVG element references a symbol though. I can achieve this using the insertAdjacentHTML method but not through appendChild method.

When using appendChild, all the right stuff is on the DOM according to browser inspectors but it's not rendered correctly. Can anyone see why?

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>

• javascript
• svg

Share Improve this question Follow edited Dec 26, 2015 at 22:11 Mi-Creativity 9,6641010 gold badges4040 silver badges4848 bronze badges asked Dec 26, 2015 at 21:52 Brad WoodsBrad Woods 1,54622 gold badges1414 silver badges3131 bronze badges 1

• xmlns:xlink="http://www.w3/1999/xlink" – CoderPi Commented Dec 26, 2015 at 21:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You cannot create SVG elements using createElement, you must use createElementNS to create them in the SVG namespace

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

insertAdjacentHTML invokes the html parser which magically fixes the element namespaces.

Similarly you can't use setAttribute to create attributes in the xlink namespace such as xlink:href. You want

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

there

I found the solution, .createElementNS & .setAttributeNS had to be used.

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

本文标签： javascriptSVG scripting with ltsymbolgtStack Overflow