SVG旋轉不使用jQuery ATTR（）

下面是我使用的代碼：

var text  = document.createElement("text"); 
var dayLabel = document.createTextNode("test"); 
$(text).attr("transform", "rotate(30 0 0)"); 
$(text).append(dayLabel); 
$(svg).append(text);

我不明白的是，當我看向DOM樹（與Safari的元素檢查員）我看到的元素具有transform="rotate(90 0 0)"集，但輪換似乎失敗了。

我的jQuery的文件是最新的（1.7.1），我教的代碼包含在一個「類」，這是在這個代碼塊實例：

$(document).ready(function() { ... right here ... });

...所以它僅在DOM準備就緒時執行。

而且，不知道這是否可以幫助，但...

這段代碼的工作原理：

$("#schedule").append('<svg id="test2" xmlns="http://www.w3.org/2000/svg" version="1.1"><text transform="rotate(30 0 0)">blabla</text></svg>');

...但是這一個不會：

$("#schedule").append('<svg id="test1" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>'); 
    $("#test1").append('<text transform="rotate(30 0 0)">blabla</text>');

基本上，它是相同的代碼，但分別在1步和2步。在這兩種情況下，Safari的DOM檢查器仍然顯示相同的內容，即<text transform="rotate(30 0 0)">blabla</text>，但在第二種情況下，該元素不會顯示在頁面中。

來源

2011-12-13 nseptier

您應該在SVG命名空間（即使用document.createElementNS（...，'text'）`）創建SVG節點（例如'`）。 – Phrogz 2011-12-14 00:54:57

您正在使用$(svg).append(text); < - 你有一個SVG變量命名，否則就應該像$('svg').append(text);

這裏的工作

我給自己定了一些文本的屬性和位置，但除此之外，它應該是你想要的，我想呢？

來源

2011-12-14 00:57:37 adeneo

是的，svg確實是一個變量（這是父svg元素）。我試圖複製/粘貼你的代碼（只刪除引用svg周圍），但它不工作，我想:( 什麼都沒有顯示在我的屏幕上 – nseptier 2011-12-14 01:11:34

SVG旋轉不使用jQuery ATTR（）

回答

相關問題