如何使用 JavaScript 创建 SVG 图形？
是否所有浏览器都支持 SVG？
问问题
116858 次
13 回答
31
查看Wikipedia 上的此列表，了解哪些浏览器支持 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-06-23T19:40:46.483 回答
23
这个答案来自 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);
于 2009-06-26T17:54:58.683 回答
17
要做到跨浏览器，我强烈推荐RaphaelJS。它有一个非常好的 API，并且在 IE 中执行 VML，无法理解 SVG。
于 2009-06-24T19:06:42.573 回答
8
除 IE 外的所有现代浏览器都支持 SVG
这是一个教程，提供有关如何使用 javascript 使用 SVG 的分步指南：
就像Boldewyn已经说过的，如果你愿意的话
要跨浏览器，我强烈推荐 RaphaelJS：rapaheljs.com
虽然现在我觉得图书馆的规模太大了。它具有许多您可能不需要的强大功能。
于 2011-04-26T20:18:03.473 回答
7
我非常喜欢jQuery SVG库。每当我需要使用 SVG 进行操作时，它都会对我有所帮助。它确实促进了从 JavaScript 使用 SVG 的工作。
于 2010-09-05T15:04:49.757 回答
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);<svg id="svg" width="100" height="100"></svg>于 2016-10-03T08:30:47.337 回答
2
有一个 jQuery 插件可让您通过 Javascript 操作 SVG：
http://plugins.jquery.com/project/svg
从它的介绍：
SVG 原生支持 Firefox、Opera 和 Safari，并通过 IE 中的 Adobe SVG 查看器或 Renesis 播放器，让您可以在网页中显示图形。现在，您可以轻松地从 JavaScript 代码驱动 SVG 画布。
于 2009-06-23T19:44:22.183 回答
2
有多个使用 Javascript 的 SVG 图形库，例如：Snap、Raphael、D3。或者您可以直接使用纯 javascript 接口 SVG。
目前所有最新版本的浏览器都支持 SVG v1.1。SVG v2.0 处于工作草案中，使用它还为时过早。
本文展示了如何使用 Javascript 与 SVG 交互，并参考了浏览器支持的链接。与 SVG 交互
于 2015-03-19T09:47:00.113 回答
2
D3.js是一个基于数据操作文档的 JavaScript 库。D3 帮助您使用 HTML、SVG 和 CSS 将数据变为现实。
于 2013-09-12T07:43:14.313 回答
2
不是所有的浏览器都支持 SVG。我相信 IE 需要一个插件来使用它们。由于 svg 只是一个 xml 文档，JavaScript 可以创建它们。我不确定是否将其加载到浏览器中。我没试过。
此链接包含有关 javascript 和 svg 的信息：
http://srufaculty.sru.edu/david.dailey/svg/SVGAnimations.htm
于 2009-06-23T19:39:34.393 回答
0
IE 9 现在支持基本的 SVG 1.1。是时候了，尽管 IE9 仍然远远落后于 Google Chrome 和 Firefox SVG 支持。
于 2013-02-19T18:02:48.097 回答
0
因此，如果您想在 JS 中一块一块地构建您的 SVG 东西，那么不要只使用createElement()，那些不会绘制，而是使用它：
var ci = document.createElementNS("http://www.w3.org/2000/svg", "circle");
于 2013-09-16T08:07:24.757 回答
-1
目前所有主流浏览器都支持 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>于 2019-11-21T09:45:09.867 回答