Question

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中找不到。我对第一个例子做错了还是错误？

Answer 1

看起来你找到了一种解决方法，但我认为你或任何读过这个问题的人都想要解释。

要创建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!

在内部，当你给它一个标签名时，jquery使用document.createElement()。获得元素后，可以将其包装为jquery对象，并照常使用。

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

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

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

属性不区分大小写，但有些svg属性是！例如，执行$element.attr("attributeName", "stroke")将无效。
.animate()有一些问题，但您可以使用自定义步骤功能来解决它。

有关它的更多详情here

Snap.svg无法使用jQuery动态（并成功）附加SVG元素

1 个答案: