使用Javascript创建SVG图形？

Creating SVG graphics using Javascript?

如何使用JavaScript创建SVG图形？

所有浏览器都支持SVG吗？

在Wikipedia上查看有关哪些浏览器支持SVG的列表。它还在脚注中提供了指向更多详细信息的链接。例如，Firefox支持基本的SVG，但目前缺少大多数动画功能。

有关如何使用Javascript创建SVG对象的教程，请参见：

1
2
3
4
5
6
7

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元素，如下所示：

1
2
3
4
5
6
7
8
9
10

//"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。下面的代码应等效于上面的代码：

1
2
3
4
5
6

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的逐步指南：

SVG Scripting with JavaScript Part 1: Simple Circle

如果您想要的话，就像Boldewyn所说的那样

To do it cross-browser, I strongly recommend RaphaelJS: rapaheljs.com

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

相关讨论

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

我没有找到符合要求的答案，因此创建圈子并将其添加到svg的方法如下：

1
2
3
4
5
6
7
8

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

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

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

当前所有最新版本的浏览器均支持SVG v1.1。 SVG v2.0处于工作草案中，现在还为时过早。

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

的接口

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

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

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

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

摘自：

Supported natively in Firefox, Opera,
and Safari and via the Adobe SVG
viewer or Renesis player in IE, SVG
lets you display graphics within your
Web pages. Now you can easily drive
the SVG canvas from your JavaScript
code.

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

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

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

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

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

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

http://msdn.microsoft.com/zh-cn/ie/hh410107.aspx

当前所有主流浏览器均支持svg。在JS中创建svg非常简单
(当前innerHTML=...相当快)

1
2
3
4
5

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

1
2
3
4
5
6
7
8
9
10
11
12

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

1 2	<button onclick="createSVG()">Create SVG</button> <button onclick="decRadius()">Decrease radius</button>