拉斐尔文本和 Safari

发布于 2025-01-01 22:39:06 字数 1035 浏览 0 评论 0原文

我最近在一个项目中使用 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 中绑定在一起。我有很多文本是由拉斐尔渲染的，所以为每个文本设置类名是不可能的（我试图避免它，因为它对我来说似乎很草率）。我尝试过以 dy 为目标，但似乎无法实现。顺便说一句，我将 Raphael 与 jQuery 一起使用。

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

提前感谢您的帮助！

原文

I've been using Raphael 2.0.1 on a project lately and I just was doing some cross-browser checks and saw that text (and only text…) is not displaying correctly in Safari.
What appears to be happening is the 's dy is being set to the same value as the 's 'y' value.

Here is an excerpt of the rendered html specific to what I am talking about:

<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 "Helvetica Neue"" 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>

And here is my js for the text in question:

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'});

As I said the y and cy values are only being tied together in Safari. I have a lot of text being rendered by Raphael so setting class names for each one is kind of out of the question (well im trying to avoid it as it seems sloppy to me). I've tried targeting the dy but can't seem to get it. BTW, I am using Raphael alongside jQuery.

Using FF: 9.0.1 and Safari: 5.1.2 both on OS X.

Thanks in advance for the help!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我家小可爱 2025-01-08 22:39:06

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

我希望这有帮助。

Try this. Make sure the container has been inserted before you call 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...

If you do it the other way around the tspan's dy attribute will be messed up (like you have observed). I found it happened in all webkit browsers.

I hope this helps.

回复收藏 0 原文

~没有更多了~