3

我使用 Raphael JS 创建了一个矢量图形 - 特别是一个圆圈。

我现在想用这个圆圈作为标题中的字母“O”。它也是一个在点击时会产生动画的圆圈。我想知道这是否可能。

这是一个小提琴，可以更好地解释我想说的话。

html非常简单：

<h2>N<span id="canvas_cont"></span>OTRE APPROCHE :</h2>

这是jsfiddle

基本上，圆圈将充当“Notre”中的第二个字母，单击时将移动到屏幕右侧。之后会发生其他事情，但这种效果是我想要得到的......

4

1 回答 1

4

将 Raphael 画布放在一个跨度中很聪明，但最终我怀疑您会后悔以这种方式将原生 HTML 与 Raphael 混合。这样做可能需要大量绝对定位和 z 索引，这些在 Raphael 中得到更好的处理和支持。

我建议您在 Raphael 中简单地绘制文本：

var text = r.set();
text.push(
    r.text(10,20,"N"),
    r.text(70,20,"TRE APPROCHE :")
);
text.attr({
    'text-anchor': 'start',
    'font-size':'36px'        
});

如果 SVG/VML 样式不合适，您也可以只使用图像。同样，我建议使用 Raphael (paper.image()) 将该图像放在画布上；

请注意，在更新的小提琴中，我将画布设置为 div 的徽标宽度。

更新了小提琴。

于 2012-12-05T14:24:26.393 回答