jQuery的追加值转换为小写 [英] jQuery append converts values to lowercase

问题描述

我一直在做一些SVG使用jQuery追加到我的code和我有我的SVG元素上的动画有问题。
问题是，当我将这个code

I've been making some SVG append to my code using jQuery and I have a problem with my animation on svg element. The thing is that when I insert this code

<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>

使用追加（），的attributeName 转换为属性名我的谷歌浏览器不能识别它作为一个有效的属性。

using append(), attributeName is converted to attributename and my Google Chrome doesn't recognize it as a valid attribute.

如何解决这个追加（）问题的任何帮助吗？

Any help on how to solve this append() issue?

推荐答案

首先，jQuery是无法在默认情况下将追加从SVG命名空间的元素。尝试建立与与Document.createElementNS（）的元素。其次，jQuery的ATTR呼吁属性名TOLOWER，所以它不会工作了驼峰格式属性，如SVG用途（请参见这个jQuery的bug ）。您可以使用不同的库，不支持SVG，如 D3 ，或者使用本地JavaScript方法的的setAttribute 。例如：

First of all, jQuery isn't able to append elements from the SVG namespace by default. Try creating the element with document.createElementNS(). Second, jQuery's attr calls toLower on attribute names, so it wont work for camelCased attributes like SVG uses (see this jQuery bug). You can use a different library that does support SVG, like D3, or use the native javascript method setAttribute. For example:

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的追加值转换为小写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！