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

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

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

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

html非常简单:

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

Here is the jsfiddle

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

最佳答案

将 Raphael Canvas 放置在一个跨度中是明智的，但在一天结束时，我怀疑您会后悔以这种方式将原生 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 设置为徽标宽度的 div。

Updated fiddle 。

关于javascript - 我想重新定位通过 Raphael js 创建的圆圈，并将其用作标题中的字母，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13724853/