9

Snap.svg 在这种情况下不起作用：

$('body').append($('<svg>').attr('id', 'test')) ;
console.log($('#test').length) ; // 1

var svg = Snap('#test') ;
svg.circle(100, 100, 50) ;
// Uncaught TypeError: Object [object Object] has no method 'circle'

...但是当元素已经在 HTML 中时有效：

<body>
    <svg id="test"></svg>
</body>

SVG 元素在 HTML 中成功，但在 Snap.svg 中找不到。我在第一个示例中做错了还是错误？

4

1 回答 1

5

看起来您找到了解决方法，但我认为您或任何阅读此问题的人可能需要解释。

要创建 SVG 元素，您必须使用document.createElementNS()，因为 svg 元素与 html 元素属于不同的命名空间。例如：

var elementHTML = document.createElement("svg"); //does not work
var elementSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg"); //works!

在内部，document.createElement()当您只给它一个标签名称时，jquery 就会使用它。拥有元素后，您可以将其包装为 jquery 对象，并正常使用它。

$(elementSVG).attr("width", 100); //etc.

使用$("<svg data-blah='asdf'>")或类似的作品，因为除了简单标签之外的任何东西都被放入元素中.innerHTML，然后被提取出来。通过这样做，可以使用相同的引擎，就好像它在页面的 HTML 标记中一样。<svg>HTML5 规范现在有特殊情况，当遇到标记中的元素时该怎么做。

在 jquery 中使用 svg 时需要注意的一些事项是：

  • 属性不区分大小写，但一些 svg 属性是！例如，做是$element.attr("attributeName", "stroke")行不通的。
  • .animate()有一些问题，但您可以使用自定义步进函数来解决它。

更多细节在这里

于 2013-12-06T04:09:28.767 回答