Snap.svg可以't使用jQuery动态地(并且成功地）找到附加的SVG元素

Snap.svg can't find dynamically (and successfully) appended SVG element with jQuery

本文关键字：成功 元素 SVG 可以 svg 动态 jQuery 使用 Snap      更新时间：2023-09-26

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

看起来你找到了一个变通方法，但我认为你或任何阅读这个问题的人可能想要一个解释。

要创建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一个标签名称时，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()有一些问题，但您可以使用自定义步骤函数来解决它

有关它的更多详细信息，请点击此处

相关文章：