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

Question

我有一个定制足球运动衫设计的网站。我正在使用Raphael.js自定义，我需要知道如何在Raphael中为文本应用大纲。

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

如何在不缩小文字宽度的情况下在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/en-US/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"});

Dan，扩展你给出的榜样

请注意IE不支持