8

I am using Rafael.js to draw rectangles on an image. My problem with setting the stroke color is that the background may be dark or light or any color. I thought that the best way to deal with that would be using dashed lines. However this call

circle = Canvas.paper.rect(left, topCoord, width, height).attr({stroke-dasharray:"---"});

does not work. Firebug (on FireFox 20.0) returns an error message saying that an existing function in my .js file does not exist. It appears that stroke-dasharray is not valid for rectangles.

OtagoHarbour
  • 3,969
  • 6
  • 43
  • 81

3 Answers3

9

Basic JavaScript error:

{stroke-dasharray:"---"}

Should be:

{"stroke-dasharray":"---"}

Also: "---" isn't a supported value for stroke-dasharray; it should be:

{"stroke-dasharray":"--"}
searlea
  • 8,173
  • 4
  • 34
  • 37
  • Thanks. That made the error go away but I am still getting solid black lines for the rectangle. Thanks, Peter. – OtagoHarbour Apr 09 '13 at 21:21
  • 1
    Looking at the [Raphael reference](http://raphaeljs.com/reference.html) I don't think three dashes is a valid option. Try two: `"--"` – searlea Apr 09 '13 at 21:26
  • That worked for getting dashed lines. Thanks very much! To get two different colors, I appear to need two calls: one with {"stroke-dasharray":"--"} and one with {"stroke":"white", "stroke-dasharray":"-.."}. Thanks very much! – OtagoHarbour Apr 09 '13 at 21:44
9

No "---", possible stroke-dasharray: [“”, “-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]

One way to color the stroke is to use the HSV or HSL space, then choose the opposite (or nearby) spectrum. Try the answers from: Given an RGB value, how do I create a tint (or shade)?

Community
  • 1
  • 1
Alvin K.
  • 4,329
  • 20
  • 25
  • Interesting. I think the ideal would be to xor with the underlying image but Rafael does not appear to have that option. Thanks, Peter. – OtagoHarbour Apr 10 '13 at 13:37
  • Some browser can support manipulation to create a glow around it. Try http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Filters – Alvin K. Apr 10 '13 at 19:50
0

"stroke-dasharray" values are:

"-"     [shortdash]
"."     [shortdot]
"-."    [shortdashdot]
"-.."   [shortdashdotdot]
". "    [dot]
"- "    [dash]
"--"    [longdash]
"- ."   [dashdot]
"--."   [longdashdot]
"--.."  [longdashdotdot]
Erick Lanford Xenes
  • 1,467
  • 2
  • 20
  • 34