如何在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"}); 

丹，擴大你給

小心爲IE不支持的例子