svg rotate不能与jQuery attr()一起使用

时间:2011-12-13 23:40:27

标签: jquery svg transform attr

我遇到的问题与此相同:jQuery attr() fails to set attribute

不幸的是,提供的解决方案似乎不起作用。

这是我正在使用的代码:

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),我展示的代码包含在“Class”中,该类在此代码块中实例化:

$(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>,但在第二种情况下,该元素根本不显示在页面中。

1 个答案:

答案 0 :(得分:1)

你正在使用$(svg).append(text);&lt; - 你有一个名为svg的变量,否则应该是$('svg').append(text);

这是一个有效的FIDDLE

我已经设置了一些文字属性和位置,但我认为它应该正是你要找的那个?