jQuery append將值轉換爲小寫

我一直在使用jQuery將一些SVG追加到我的代碼中，並且我在svg元素上的動畫有問題。的事情是，當我使用追加（）插入此代碼jQuery append將值轉換爲小寫

<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轉化爲爲AttributeName和我的谷歌瀏覽器不能識別它作爲一個有效的屬性。

有關如何解決此append（）問題的任何幫助？

來源

2014-02-20 bigcat

可能重複的：http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element/3642265#3642265 –

首先，默認情況下，jQuery不能從SVG命名空間追加元素。嘗試使用document.createElementNS()創建元素。其次，jQuery的attr在屬性名稱上調用toLower，所以它不適用於像SVG用法這樣的駝峯屬性（參見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/

來源

2014-02-21 00:03:21 Cody

我已經做到了。我有一個創建SVG的函數：[code] function svg（element，eldict，divid）$ el = $（document.implementation.createDocument（null，null，null）.createElementNS（'http：//www.w3 .org/2000/svg'，element））; $（divid）.append（$ el.attr（eldict））; } [/ code] 但是當我追加屬性時，它們是小寫字母，動畫不起作用 – bigcat

你傳遞給那個函數的是什麼？使用不完整的代碼很難提供幫助。你可以在http://jsfiddle.net/上發佈一個完整的例子嗎？ – Cody

啊，它看起來像jquery中的'attr'調用下面。您將不得不使用setAttribute中的內置代碼。我會更新我的答案，但以下是一個示例：http://jsfiddle.net/CodyRank/7L6wX/ – Cody

jQuery append將值轉換爲小寫

回答

相關問題