使用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具有可以直接访问的中心点和半径的cx ， cy和r属性。 这些是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支持。
所以，如果你想在JS中逐个构build你的SVG的东西，那么不要只使用createElement() ，那些不会绘制的，而是使用它：
var ci = document.createElementNS("http://www.w3.org/2000/svg", "circle");
