是否可以直接使用jquery和Svg（没有插件）？ [英] Is it possible to work with jquery and Svg directly (no plugins)?

问题描述

我正在尝试与Jquery和Svg一起工作。但我不想使用任何插件。

现在我正在处理的问题是，当我尝试使用传统的附加模式将子添加到svg文档时，该对象不会呈现。让我们看看我试图做什么：

  / *使用纯JS * / 
创建svg容器var container = document.getElementById（svg_space）; 
 mySvg = document.createElementNS（http://www.w3.org/2000/svg，svg）; 
 mySvg.setAttribute（version，1.2）; 
 mySvg.setAttribute（baseProfile，tiny）; 
 container.appendChild（mySvg）; 
 
 / *使用纯JS * / 
添加子项并将属性设置为SVG容器Circle = document.createElementNS（http://www.w3.org/2000/svg ，圆）; 
 Circle.setAttribute（cx，60）; 
 Circle.setAttribute（cy，30）; 
 Circle.setAttribute（r，13）; 
 Circle.setAttribute（class，class1）; 
 mySvg.appendChild（Circle）; / *之后，循环呈现* / 
 
 / *然后，我尝试使用jQuery来执行相同的操作... * / 
 $（mySvg）.append（ < circle />）; 
 $（mySvg）.find（circle）。attr（cx，160）; 
 $（mySvg）.find（circle）。attr（cy，70）; 
 $（mySvg）.find（circle）。attr（r，30）; 
 $（mySvg）.find（circle）。attr（class，class1）; 
  

...但在此操作后，该圈子不呈现。我检查至少是在开发人员工具检查器中的DOM树中是否真的附加了这个圈子，我发现这两个元素都存在，并且先前设置了正确的属性，但是用jQuery创建的圆就好像是一个html后代，不是一个svg后代。这意味着与svg circle元素相关的构造函数，原型和其他方法不是这个jquery循环的一部分，而是与纯HTML标签相关。

有没有办法使用jquery创建svg元素作为svg后代，或者更好地使用纯JavaScript，尽管生产力下降？

解决方案

无法尝试，但我敢打赌这会奏效。而不是

  $（mySvg）.append（< circle />）; 
  

做

  $（mySvg）.append（document.createElementNS（http://www.w3.org/2000/svg，circle））; 
  

如果您计划多次进行此操作，可能

  function svgEl（tagName）{
 return document.createElementNS（http://www.w3.org/2000/svg，tagName）; 
} 
 
 $（mySvg）.append（svgEl（circle））; 
  

这与通过 $（ document.createElement（div））而不是 $（< div />）。

I'm trying to work with Jquery and Svg together. But I don´t want to use any plugin.

The problem I am dealing now is that when I try to work using the traditional append mode to add a child to the svg document, the object is not rendered. Let´s check out what I tried to do:

/* Creating the svg container using pure JS */
var container = document.getElementById("svg_space");
mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
mySvg.setAttribute("version", "1.2");
mySvg.setAttribute("baseProfile", "tiny");
container.appendChild(mySvg);

/* Adding a child and setting attributes to the SVG container using pure JS */
Circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
Circle.setAttribute("cx", "60");
Circle.setAttribute("cy", "30");
Circle.setAttribute("r", "13");
Circle.setAttribute("class", "class1");
    mySvg.appendChild(Circle); /* After this, the circle is rendered */

/* Then, I tried to use jQuery to perform the same action... */
$(mySvg).append("<circle />");
$(mySvg).find("circle").attr("cx","160");
$(mySvg).find("circle").attr("cy","70");
$(mySvg).find("circle").attr("r","30");
$(mySvg).find("circle").attr("class","class1" );

...but after this action, the circle does not render. I check if at least the circle was really appended to the DOM tree in the Developers Tool Inspector, and I found out that both element exist, with the proper attributes previously set, but the circle created with jQuery was as if it were a html descendant, not as a svg descendant. This means that the constructors, prototypes and other methods related to a svg circle element was not part of the this 'jquery' circle, but instead the related to a pure html tag.

Is there a way to create svg elements as svg descendants using jquery, or is better the use of pure javascript despite the loss of productivity?

解决方案

Haven't been able to try, but I bet this would work. Instead of

$(mySvg).append("<circle />");

Do

$(mySvg).append(document.createElementNS("http://www.w3.org/2000/svg", "circle"));

If you plan on doing this more than once, maybe

function svgEl(tagName) {
    return document.createElementNS("http://www.w3.org/2000/svg", tagName);
}

$(mySvg).append(svgEl("circle"));

This is the same as the old trick of getting better performance via $(document.createElement("div")) instead of $("<div />").

这篇关于是否可以直接使用jquery和Svg（没有插件）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！