Question

我最近一直在项目中使用Raphael 2.0.1而且我正在进行一些跨浏览器检查，并且看到文本（并且只有文本...）在Safari中无法正确显示。似乎正在发生的是'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中捆绑在一起。拉斐尔有很多文字正在呈现，所以为每一个设置类名都是不可能的（我试图避免它，因为它似乎对我来说很邋））。我试过瞄准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浏览器中。

我希望这会有所帮助。

拉斐尔文本和Safari

1 个答案: