使用Javascript创建SVG图形？

如何使用JavaScript创建SVG图形？

所有浏览器都支持SVG吗？

看看这个名单在维基百科上关于该浏览器支持SVG。它还在脚注中提供了指向更多详细信息的链接。例如，Firefox支持基本的SVG，但目前缺少大多数动画功能。

可以在此处找到有关如何使用Javascript创建SVG对象的教程：

var svgns = "http://www.w3.org/2000/svg";
var svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r",  20);
shape.setAttributeNS(null, "fill", "green"); 

答案是从2009年开始的。现在是社区Wiki，以防万一有人希望将其更新。

IE需要一个插件来显示SVG。最常见的是Adobe可以下载的一种。但是，Adobe不再支持或开发它。Firefox，Opera，Chrome，Safari都可以正常显示基本的SVG，但是如果使用高级功能（支持不完整），则会出现怪癖。Firefox不支持声明性动画。

可以使用javascript创建SVG元素，如下所示：

// "circle" may be any tag name
var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
// Set any attributes as desired
shape.setAttribute("cx", 25);
shape.setAttribute("cy", 25);
shape.setAttribute("r",  20);
shape.setAttribute("fill", "green");
// Add to a parent node; document.documentElement should be the root svg element.
// Acquiring a parent element with document.getElementById() would be safest.
document.documentElement.appendChild(shape);

该SVG规范描述了所有SVG元素的DOM接口。例如，SVGCircleElement，这是上面创建，具有cx，cy以及r属性为圆心和半径，其可以被直接访问。这些是SVGAnimatedLength属性，具有baseVal正常值的animVal属性和动画值的属性。目前，浏览器无法可靠地支持该animVal属性。baseVal是SVGLength，其值由value属性设置。

因此，对于脚本动画，还可以设置这些DOM属性来控制SVG。以下代码应等同于上述代码：

var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
shape.cx.baseVal.value = 25;
shape.cy.baseVal.value = 25;
shape.r.baseVal.value = 20;
shape.setAttribute("fill", "green");
document.documentElement.appendChild(shape);

为了跨浏览器做到这一点，我强烈推荐RaphaelJS。它拥有良好的API并在IE中执行VML，这无法理解SVG。

除IE之外的所有现代浏览器均支持SVG

这是一个教程，提供有关如何使用javascript处理SVG的逐步指南：

使用JavaScript的SVG脚本，第1部分：简单循环

就像Boldewyn已经说过的那样

为了跨浏览器做到这一点，我强烈推荐RaphaelJS：rapaheljs.com

尽管现在我觉得图书馆的规模太大。它具有许多很棒的功能，您可能不需要其中的一些功能。

我非常喜欢jQuery SVG库。每当我需要使用SVG进行操作时，它都会为我提供帮助。它确实促进了JavaScript中SVG的使用。

我没有找到符合要求的答案，因此要创建圈子并将其添加到svg，请尝试以下操作：

var svgns = "http://www.w3.org/2000/svg";
var svg = document.getElementById('svg');
var shape = document.createElementNS(svgns, "circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r",  20);
shape.setAttributeNS(null, "fill", "green");
svg.appendChild(shape);

<svg id="svg" width="100" height="100"></svg>

并非并非所有浏览器都支持SVG。我相信IE需要使用插件才能使用它们。由于svg只是一个xml文档，因此JavaScript可以创建它们。我不确定如何将其加载到浏览器中。我还没试过

此链接包含有关javascript和svg的信息：

http://srufaculty.sru.edu/david.dailey/svg/SVGAnimations.htm

有一个jQuery插件，可让您通过Javascript操作SVG：

http://plugins.jquery.com/project/svg

从其简介：

通过Firefox，Opera和Safari原生支持，并通过IE中的Adobe SVG查看器或Renesis播放器，SVG允许您在网页中显示图形。现在，您可以轻松地从JavaScript代码驱动SVG画布。

您可以使用d3.js。它易于使用且功能强大。

D3.js是一个JavaScript库，用于根据数据处理文档。D3可帮助您使用HTML，SVG和CSS使数据栩栩如生。

使用Javascript的SVG图形上有多个库，例如：Snap，Raphael，D3。或者，您也可以直接将SVG与普通的javascript接口。

当前，所有最新版本的浏览器都支持SVG v1.1。SVG v2.0处于工作草案中，尚不成熟。

本文介绍了如何使用Javascript与SVG进行交互，并引用了有关浏览器支持的链接。与SVG接口

IE 9现在支持基本的SVG 1.1。尽管IE9仍远远落后于Google Chrome和Firefox SVG支持，但时间已到。

http://msdn.microsoft.com/en-us/ie/hh410107.aspx

因此，如果您想在JS中逐个构建SVG素材，则不要只使用createElement()，那些不会绘制的东西，请改用此：

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

当前，所有主流浏览器都支持svg。创建SVG的JS是非常简单的（目前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>