如何在Raphael.js中为文本应用大纲

Question

我有一个定制足球服设计的网站。 我正在使用Raphael.js定制，我需要知道如何在Raphael中为文本应用轮廓 。

在搜索时，我得到了使用Raphael的stroke属性的建议。 但这并没有产生轮廓效果。 中风实际上是内联的。 当我们增加笔画宽度时，文本的宽度将减小。

如何在Raphael中为文本应用轮廓，而不会减小文本的宽度？

中风前的文字：

中风后的文字：

应用笔触/轮廓时，文本需要像这样（仅来自photoshop的演示）：

Answer 1

尝试这个。

text.attr({ 
        "font-size": 100, 
        "font-family": "Arial, Helvetica, sans-serif",
        "stroke":"red",
        "stroke-width":"5px",
        "stroke-linecap": "square",
        "stroke-linejoin": "bevel"});

Answer 2

“ paint-order属性指定给定形状或文本元素的填充，描边和标记的绘制顺序。”

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/paint-order

你想要的是

var paper = Raphael("playarea", 500, 500); 
var text = paper.text(200, 100, "RAPHAEL!!"); 
text.attr({ "font-size": 100, "font-family": "Arial, Helvetica, sans-serif", "stroke":"red", "stroke-width":"5px", "paint-order":"stroke"});

丹，在您所举的例子上做进一步的说明

注意IE不支持