提前。svg不能使用jQuery动态地(并且成功地)添加svg元素

Snap.svg doesn't work in this case :

提前。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'

... but works when the element is already in the HTML :

…但是当元素已经在HTML中时，它就可以工作了:

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

The SVG element is successfully in the HTML but can't be found with Snap.svg. Am I doing it wrong with the first example or is it a bug ?

SVG元素在HTML中很成功，但在Snap.svg中无法找到。我在第一个例子中做错了吗?还是一个错误?

1 个解决方案

#1

It looks like you found a workaround, but I thought you, or anyone reading this question, might want an explanation.

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

To create SVG elements, you have to use document.createElementNS() because svg elements are part of different namespace than html elements. For example:

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

and internally, jquery uses document.createElement() when you give it just a tag name. Once you have the element, you can wrap it as a jquery object, and use it as normal.

在内部，jquery只给document.createElement()一个标记名。一旦有了元素，就可以将其包装为jquery对象，并像往常一样使用它。

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

Using $("<svg data-blah='asdf'>") or similar works because anything beyond a simple tag is put into an element via .innerHTML and then extracted out. By doing it this way, the same engine is used as if it were in the page's HTML markup. And the HTML5 spec now has special cases for what to do when encountering a <svg> element in the markup.

使用$(“ 数据-blah='asdf'>

Some things to look out for when working with svg in jquery are:

在使用jquery处理svg时要注意以下几点:

attributes are not case sensitive, but some svg attributes are! For example, doing $element.attr("attributeName", "stroke") will not work.
属性不是区分大小写的，但是一些svg属性是!例如,做美元元素。attr(“attributeName”，“stroke”)将不起作用。
.animate() has some problems, but you can use a custom step function to get around it.
.animate()有一些问题，但是您可以使用自定义的步骤函数来绕过它。

More details about it here

更多细节在这里

#1