javascript - 我想重新定位通过 Raphael js 创建的圆圈，并将其用作标题中的字母

Question

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

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

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

html 非常简单:

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

Here is the jsfiddle

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

Answer 1

将 Raphael canvas 放置在一个 span 中很聪明，但最终我怀疑您会后悔以这种方式将原生 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()) 将该图像放在 Canvas 上；

请注意，在更新的 fiddle 中，我将 Canvas 设为 Logo 宽度的 div。

Updated fiddle .