使用Javascript创buildSVGgraphics?

我怎样才能创build使用Javascript的SVGgraphics?

所有的浏览器都支持SVG吗?

看看维基百科关于哪些浏览器支持SVG的列表 。 它还提供了脚注中更多细节的链接。 Firefox例如支持基本的SVG,但是目前缺乏大部分的animationfunction。

有关如何使用Javascript创buildSVG对象的教程可以在这里find:

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年开始的。

IE需要一个插件来显示SVG。 最常见的是Adobe可以下载的一个; 但是,Adobe不再支持或开发它。 Firefox,Opera,Chrome,Safari,都将显示基本的SVG,但如果使用高级function,将会出现怪异现象,因为支持不完整。 Firefox不支持声明式animation。

SVG元素可以使用javascript创build,如下所示:

 // "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接口。 例如,上面创build的SVGCircleElement具有可以直接访问的中心点和半径的cxcyr属性。 这些是SVGAnimatedLength属性,它具有正常值的animVal属性和animation值的animVal属性。 目前的浏览器不能可靠地支持animVal属性。 baseVal是一个SVGLength,它的值由value属性设置。

因此,对于脚本animation,还可以设置这些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); 

要跨浏览器,我强烈推荐RaphaelJS 。 它有一个好的API的地狱,并在IE浏览器中,无法理解SVG的VML。

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

这里是一个教程,提供了如何使用JavaScript处理SVG的分步指南:

使用JavaScript的SVG脚本第1部分:简单的圈子

像Boldewyn已经说过,如果你想

要跨浏览器,我强烈build议RaphaelJS: rapaheljs.com

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

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

我发现没有编写答案,所以要创build圈子,并添加到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> 

不是所有的浏览器都支持SVG。 我相信IE需要一个插件来使用它们。 由于svg只是一个XML文档,JavaScript可以创build它们。 我不确定如何将其加载到浏览器。 我没有尝试过。

这个链接有关于javascript和svg的信息:

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

有一个jQuery插件,可以让你通过Javascript操纵SVG:

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

从其介绍:

在Firefox,Opera和Safari中本地支持,并且通过IE中的Adobe SVG查看器或Renesis播放器,SVG允许您在网页中显示graphics。 现在,您可以轻松地从JavaScript代码中驱动SVGcanvas。

你可以使用d3.js 它很容易使用和function强大。

D3.js是一个基于数据处理文档的JavaScript库。 D3帮助您使用HTML,SVG和CSS将数据带入生活。

SVGgraphics上有多个使用JavaScript的库:Snap,Raphael,D3。 或者你可以直接使用普通的javascript来接口SVG。

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

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

IE 9现在支持基本的SVG 1.1。 现在已经过去了,尽pipeIE9还远远落后于Google Chrome和Firefox的SVG支持。

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

所以,如果你想在JS中逐个构build你的SVG的东西,那么不要只使用createElement() ,那些不会绘制的,而是使用它:

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