Question

我一直在使用jQuery将一些SVG附加到我的代码中，我的svg元素上的动画有问题。问题是当我插入此代码时

<circle fill="#2380c2" cx="20.5" cy="12.5" r="1.5" id="circ1">
<animate begin="svg_1.mouseover" end="svg_1.mouseout" from="20.5" to="20.5" dur="1.5s" repeatCount="indefinite" attributeName="cx" values="20.5;18.5;20.5;22.5;20.5"></animate
</circle>

使用append（）， attributeName 会转换为 attributename ，而我的Google Chrome浏览器无法将其识别为有效属性。

有关如何解决此append（）问题的任何帮助？

Answer 1

首先，默认情况下，jQuery无法从SVG名称空间追加元素。尝试使用document.createElementNS()创建元素。其次，jQuery的attr在属性名称上调用toLower，因此它不适用于像SVG一样使用的camelCased属性（参见this jQuery bug）。您可以使用支持SVG的其他库，例如D3，也可以使用本机javascript方法setAttribute。例如：

svgEl = $(document.createElementNS('http://www.w3.org/2000/svg', 'circle'));
svgEl.attr({fill: '#2380c2', cx:'20', cy:'20', r:'10'}).appendTo('#theSvg');

animateEl = $(document.createElementNS('http://www.w3.org/2000/svg', 'animate'));
animateEl.attr({from:"10", to:"20", dur:"3s"}).appendTo('circle');
$animateEl = $("animate")[0];
$animateEl.setAttribute("attributeName", "r");
$animateEl.setAttribute("repeatCount", "indefinite");

演示：http://jsfiddle.net/CodyRank/7L6wX/1/

jQuery append将值转换为小写

1 个答案: