javascript - 拉斐尔文本和 Safari

Question

我最近一直在一个项目中使用 Raphael 2.0.1，我只是在做一些跨浏览器检查，发现文本(而且只有文本……)在 Safari 中显示不正确。似乎正在发生的是 's dy 被设置为与 's 'y' 值相同的值。

这是我所谈论内容的渲染 html 的摘录:

<text style="font: normal normal normal 12px/normal 'Helvetica Neue'; text-anchor: start; cursor: pointer; opacity: 0.7; " x="96" y="15" text-anchor="start" font="12px &quot;Helvetica Neue&quot;" stroke="none" fill="#17d6c6" opacity="0.7">
<tspan dy="15">U.S Population - Blood</tspan>
<tspan dy="10.799999999999999" x="96">Type Breakdown</tspan>
</text>

这是我对相关文本的 js:

var type_text = lab_culture_type.text(96, 15, 'U.S Population - Blood\nType Breakdown');
    type_text.attr({'fill':'#17D6C6', 'font':'12px "Helvetica Neue"', 'text-anchor':'start','cursor':'pointer'});

正如我所说，y 和 cy 值仅在 Safari 中绑定(bind)在一起。我有很多文本是由 Raphael 渲染的，所以为每个文本设置类名是不可能的(我试图避免它，因为它对我来说似乎很草率)。我试过以 dy 为目标，但似乎无法得到它。顺便说一句，我正在使用 Raphael 和 jQuery。

在 OS X 上使用 FF:9.0.1 和 Safari:5.1.2。

在此先感谢您的帮助!

Answer 1

试试这个。在调用 Raphael 之前，请确保容器已插入。

var container = $('<div></div>'),
    r;

// Insert
$('body').append(container);

r = Raphael($container[0], 800, 600);

// Add text etc, dy on tspan should be correct...

如果你以相反的方式来做，那么 tspan 的 dy 属性将会被弄乱(就像你观察到的那样)。我发现它发生在所有 webkit 浏览器中。

希望对您有所帮助。