logo标签列表

使用Javascript创建SVG图形？

javascriptgraphicssvg
82

如何使用JavaScript创建SVG图形？

所有浏览器都支持SVG吗？

2
经过两年的 SVG 开发，可以说它是不错的东西，但是如果没有所有主要浏览器的全面支持，它就不值得使用。如果你开始一个新的应用程序，请选择其他格式。 - Kamarey
33
阅读此问题与回答的人，请注意自 2009 年提问以来情况已经发生了很大变化，现在所有主要浏览器都原生支持 SVG（无需 polyfills）！请注意更新。 - Jeach
1
这里是查看实际支持浏览器的链接：http://caniuse.com/#feat=svg。现在使用SVG绝对安全。 - Lukas Liesis
13个回答
0

所以如果你想要在JS中逐步构建SVG内容，不要只使用createElement()，因为那些不会绘制，改用这个：

var ci = document.createElementNS("http://www.w3.org/2000/svg", "circle");
0
0

目前所有主要浏览器都支持SVG。在JS中创建SVG非常简单（当前innerHTML=... 相当快速）

element.innerHTML = `
    <svg viewBox="0 0 400 100" >
      <circle id="circ" cx="50" cy="50" r="50" fill="red" />
    </svg>
`;


function createSVG() {
  box.innerHTML = `
    <svg viewBox="0 0 400 100" >
      <circle id="circ" cx="50" cy="50" r="50" fill="red" />
    </svg>
  `;
}

function decRadius() {
  r=circ.getAttribute('r');
  circ.setAttribute('r',r*0.5);
}
<button onclick="createSVG()">Create SVG</button>
<button onclick="decRadius()">Decrease radius</button>
<div id="box"></div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接