使用Javascript创建SVG图形？

Question

如何使用Javascript创建SVG图形？

所有浏览器都支持SVG吗？

Answer 1

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

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规范描述了所有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的分步指南:

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

就像Boldewyn已经说过的话,如果你想要的话

为了跨浏览器,我强烈推荐RaphaelJS:rapaheljs.com

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

Answer 5

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

Answer 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>

Answer 7

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

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

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