javascript-RaphaelJS如何使内联SVG在Firefox 3.6中工作？

我在玩RaphaelJS,并意识到它可以在Firefox 3.6.22中使用内联SVG(至少是looks like it,否则我会被Firebug愚弄…).

由于我自己的SVG没有显示,我想知道RaphaelJS如何在Firefox 3.6 does not support blunt inlining of SVG时实现此功能.我(简要地)查看了源代码,还发现another answer内联SVG如何在较旧的Firefox浏览器中工作.尽管如此,我仍然坚持让它自己工作(即AJAX加载SVG并将其放入DOM).

解决方法:

我要回答我自己的问题：

>Raphaël实际上并没有做任何特别的事情(在这种情况下).
>多亏了my post on the Raphaël Google Group的回答,我才被指出了正确的方向. “内联SVG”表示“内联通用HTML”(也在Mozilla blog post中进行了说明),因此无需使用XHTML和适当的命名空间.我之前的理解是,我只能通过< object>使用SVG.或< embed>在某些浏览器(例如Safari 4或Firefox 3.6)中……这是错误的.

我是通过将XML字符串作为XML字符串传递给jQuery’s .html() method来添加SVG的.在大多数现代浏览器的当前版本中,此方法都可以正常工作,但是方法名称提示如果在要添加SVG的浏览器中添加SVG,这可能不是正确的方法在html中不支持SVG.因此,我更改了代码,并使用document.createElementNS将我的SVG直接添加到DOM中.还有另一种方式来批量注入我的SVG-XML(如Google组线程中所述),但是我还没有时间研究它.

所以现在我可以在所有目标浏览器上使用SVG了,但是较旧的IE很好,这很好.样例代码：

var svgContainer = document.getElementById("svg-container"),
    svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
    g = document.createElementNS("http://www.w3.org/2000/svg", "g");
svgElement.setAttribute("version", "1.1");
// Add stuff to the group
svgElement.appendChild(g);
svgContainer.appendChild(svgElement);

标签：vector,svg,inline,raphael,javascript
来源： https://codeday.me/bug/20191102/1989527.html