gpt4 book ai didi

javascript - Snap.svg 无法使用 jQuery 动态(并成功)找到附加的 SVG 元素

转载 作者:数据小太阳 更新时间:2023-10-29 03:54:26 24 4
gpt4 key购买 nike

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 找到。我在第一个示例中做错了吗?还是错误?

最佳答案

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

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

关于javascript - Snap.svg 无法使用 jQuery 动态(并成功)找到附加的 SVG 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20045532/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com