var paper = new Raphael('paper');
for (var i = 0; i < 6; i++) {
    paper.path([
        'M', i * 20 + 30, 10,
        'L', i * 20 + 30, 300
    ]).attr({
        'stroke-width': 5,
        'stroke': ((i%2==0) ? 'red' : 'blue' ),
        'arrow-end': 'block-midium-midium',
        'arrow-start': 'oval-narrow-short'       
    });
}

The actual lines of the arrow have the correct colors, but the arrow end/start have the same color

Check here: /

var paper = new Raphael('paper');
for (var i = 0; i < 6; i++) {
    paper.path([
        'M', i * 20 + 30, 10,
        'L', i * 20 + 30, 300
    ]).attr({
        'stroke-width': 5,
        'stroke': ((i%2==0) ? 'red' : 'blue' ),
        'arrow-end': 'block-midium-midium',
        'arrow-start': 'oval-narrow-short'       
    });
}

The actual lines of the arrow have the correct colors, but the arrow end/start have the same color

Check here: http://jsfiddle/MGtUQ/2/

• javascript
• html
• canvas
• raphael

2 Answers 2

This is known bug. It's not on master repository yet, but you can fork v2.1.2 version from GitHub. It should be fixed there already.

Edit: Fix was implemented in this mit. For anyone who will use it I'm highly remend to update after fix will be ready in release version to avoid not supported code.

Line 5963 in raphael.js file.

for those who has raphael-min.js search for: B="raphael-marker-"+r+w+x+y; and substitute it with B="raphael-marker-"+r+w+x+y+"-obj"+d.id;