Photoshop Question posted in
The official user guide can be found here.

How to apply an outline for a text in Raphael.js – Photoshop

I have a site for customize football jersey design. I’m using Raphael.js customization and I need to know how we can apply outline for a text in Raphael.

On searching, I got the suggestion of using the stroke property of Raphael. But this is not giving an outline effect. Stroke is actually Inline. When we increase stroke width, the width of the text will decrease.

How do I apply outline for a text in Raphael without reducing width of text?

Text before stroke : Text before applying stroke

Text after stroke: Text after applying stroke

Text needs to be like this on applying stroke/outline (just demo from photoshop): text need to be like this on applying stroke (just demo from photoshop)

Tags:

3

Answers


  1. 0

    Try this.

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

    “The paint-order attribute specifies the order that the fill, stroke, and markers of a given shape or text element are painted.”

    https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order

    What you want would be 

    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, expanding on the example you gave

    Beware for IE does not support

    Login or Signup to reply.
  3. 0

    I just had this problem. An easy solution is to add the text twice at the same position. First add text in the color you want the stroke to be, and add your stroke. Then, add the text again with the desired fill color and no stroke. Adjust the stroke width on the first text element until you achieve the desired effect.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search