javascript-Raphael文字和Safari

我最近在一个项目上一直使用Raphael 2.0.1,我只是在做一些跨浏览器检查,发现Safari中的文本(只有文本…)不能正确显示.
似乎正在将dy设置为与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中捆绑在一起.我有很多文本是由Raphael渲染的,所以为每个类设置类名是不可能的(我想避免使用它,因为对我来说似乎很草率).我尝试过针对dy,但似乎无法实现.顺便说一句,我正在使用Raphael和jQuery.

在OS X上都使用FF：9.0.1和Safari：5.1.2.

先谢谢您的帮助！

解决方法:

尝试这个.在致电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浏览器中.

我希望这有帮助.

标签：svg,safari,raphael,positioning,javascript
来源： https://codeday.me/bug/20191201/2083365.html