使用 Javascript 创建 SVG 图形？答案

【问题标题】：Creating SVG graphics using Javascript?使用 Javascript 创建 SVG 图形？
【发布时间】：2009-06-23 19:37:05
【问题描述】：

如何使用 JavaScript 创建 SVG 图形？

所有浏览器都支持 SVG 吗？

【问题讨论】：

经过 2 年的 svg 开发可以说，这是一件好事，但如果没有所有主流浏览器的完全支持，使用起来也不会更糟。如果您启动一个新应用，请选择其他格式。
任何阅读此问题和答案的人，请注意自 2009 年提出该问题以来已经发生了很大变化，并且所有主要浏览器现在都原生支持 SVG（不需要 polyfills）！
这里是查看实际支持的浏览器的链接。 caniuse.com/#feat=svg 现在使用 svg 绝对省钱。

标签： javascript graphics svg

【解决方案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");

【讨论】：

@Aculeo：谢谢，已修复。
火狐有什么解决方案吗？
你真的应该解释一下evt。请参阅 themadmax 的回答，了解可行的解决方案。

【解决方案2】：

这个答案来自 2009 年。现在是一个社区 wiki，以防有人愿意更新它。

IE 需要一个插件来显示 SVG。最常见的是可供 Adobe 下载的版本。但是，Adobe 不再支持或开发它。 Firefox、Opera、Chrome、Safari 都可以正常显示基本的 SVG，但如果使用高级功能则会遇到问题，因为支持不完整。 Firefox 不支持声明式动画。

SVG 元素可以用 javascript 创建如下：

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

【讨论】：

这不再正确，应该更新或删除这个答案。

【解决方案3】：

要跨浏览器，我强烈推荐RaphaelJS。它有一个非常好的 API，并且在 IE 中执行 VML，但无法理解 SVG。

【讨论】：

【解决方案4】：

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

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

SVG Scripting with JavaScript Part 1: Simple Circle

如果你愿意，就像Boldewyn已经说过的那样

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

虽然现在我觉得图书馆的规模太大了。它具有许多您可能不需要的强大功能。

【讨论】：

“除了 IE 之外的所有现代浏览器”？ :)
没有 IE 版本是现代的。对于 SVG，IE（通过 v11）不支持 SMIL，所以忘记任何有趣的动画！

【解决方案5】：

我非常喜欢jQuery SVG 图书馆。每当我需要使用 SVG 进行操作时，它都会对我有所帮助。它确实促进了从 JavaScript 使用 SVG 的工作。

【讨论】：

【解决方案6】：

我没有找到符合要求的答案，所以创建圈子并添加到 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);

&lt;svg id="svg" width="100" height="100"&gt;&lt;/svg&gt;

【讨论】：

【解决方案7】：

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

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

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

【讨论】：

【解决方案8】：

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

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

从它的介绍：

在 Firefox、Opera、和 Safari 以及通过 Adobe SVG IE、SVG 中的查看器或 Renesis 播放器让您在您的网页。现在您可以轻松驾驶 JavaScript 中的 SVG 画布代码。

【讨论】：

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

有多个使用 Javascript 的 SVG 图形库，例如：Snap、Raphael、D3。或者您可以直接使用纯 javascript 接口 SVG。

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

本文展示了如何使用 Javascript 与 SVG 交互，并参考了浏览器支持的链接。 Interfacing with SVG

【讨论】：

【解决方案11】：

IE 9 现在支持基本的 SVG 1.1。是时候了，尽管 IE9 仍然远远落后于 Google Chrome 和 Firefox SVG 支持。

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

【讨论】：

【解决方案12】：

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

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

【讨论】：

【解决方案13】：

目前所有主流浏览器support svg。在 JS 中创建 svg 非常简单（目前innerHTML=...是quite fast）

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>

【讨论】：