Как применить схему для текста в Raphael.js

У меня есть сайт для настройки дизайна футбольного свитера. Я использую настройку Raphael.js и мне нужно знать, как мы можем применить контур для текста в Рафаэле.

При поиске я получил предложение использовать свойство хода Рафаэля. Но это не дает общего эффекта. Инсульт на самом деле Inline. Когда мы увеличиваем ширину обводки, ширина текста уменьшается.

Как применить контур для текста в Рафаэле, не уменьшая ширину текста?

Текст перед штрихом: Текст перед применением обводки

Текст после штриха: Текст после применения обводки

Текст должен быть таким при применении обводки / контура (просто демонстрация из фотошопа): текст должен быть таким при нанесении мазка (просто демо из фотошопа)

0

Решение

Попробуй это.

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

Другие решения

«Атрибут 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 не поддерживает

0

По вопросам рекламы [email protected]