Question

如何使用Javascript创建SVG图形？

所有浏览器都支持SVG吗？

Answer 1

查看this list on Wikipedia哪些浏览器支持SVG。它还提供了脚注中更多细节的链接。例如，Firefox支持基本的SVG，但目前缺少大多数动画功能。

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

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

Answer 2

这个答案来自2009年。

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 specification描述了所有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);

Answer 3

要进行跨浏览，我强烈推荐RaphaelJS。它有一个很好的API，在IE中做VML，无法理解SVG。

Answer 4

除IE以外的所有现代浏览器都支持SVG

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

SVG Scripting with JavaScript Part 1: Simple Circle

就像Boldewyn已经说过的那样，如果你想要

要进行跨浏览，我强烈推荐RaphaelJS：rapaheljs.com

虽然现在我觉得图书馆的大小太大了。它有许多很棒的功能，其中一些你可能不需要。

Answer 5

我非常喜欢jQuery SVG库。每次我需要使用SVG操作时它都会帮助我。它真正促进了使用JavaScript的SVG工作。

Answer 6

我发现没有编译答案，所以创建圈子并添加到svg试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 7

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

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

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

Answer 8

有一个jQuery插件，允许你通过Javascript操作SVG：

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

从其介绍：

在Firefox，Opera中原生支持，和Safari以及通过Adobe SVG IE浏览器中的查看器或Renesis播放器，SVG 让你在你的内容中显示图形网页。现在你可以轻松驾驶来自JavaScript的SVG画布代码。

Answer 9

You can use d3.js. It is easy to use and powerful.

D3.js是一个用于根据数据操作文档的JavaScript库。 D3帮助您使用HTML，SVG和CSS将数据变为现实。

Answer 10

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

目前所有最新版本的浏览器都支持SVG v1.1。 SVG v2.0正处于工作草案中，使用起来还为时过早。

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

Answer 11

IE 9现在支持基本的SVG 1.1。这是时候了，虽然IE9仍远远落后于谷歌Chrome和Firefox SVG的支持。

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

Answer 12

因此，如果你想在JS中逐个构建你的SVG东西，那么不要只使用createElement()，那些不会绘制，而是使用它：

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

Answer 13

当前所有主流浏览器support svg。在JS中创建svg非常简单

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>

使用Javascript创建SVG图形？

13 个答案:

这个答案来自2009年。