Raphael Js can't fill path with Image

Question

I have been trying to fill up path with image pattern but in vain. I have this fiddle. I am able to fill the object like cirle with image but not any path. Please click on the red area label and click on any path for the action.

JS:

var paths = {
    path_1: {
        name: '1',
        path: 'M30.848,0.13 45.4,1.747 58.983,1.747 74.829,3.687   90.999,3.687 123.015,3.687 149.21,0.13 176.051,1.908 201.923,3.687 236.526,3.687 268.865,6.598 279.538,6.598 297.647,6.598   316.404,6.598 339.042,3.364 369.765,6.598 391.108,6.598 420.861,9.185 435.091,18.563 440.265,40.23 443.499,68.366   447.703,91.65 451.907,115.582 453.848,138.287 453.848,160.533 456.758,179.29 459.345,195.46 461.608,213.57 462.902,229.093   465.489,239.441 466.783,254.965 464.196,277.926 461.285,288.921 455.464,292.479 440.911,297.006 423.448,298.623   389.492,298.623 376.232,298.623 370.411,298.623 360.387,298.623 355.858,298.623 348.421,298.623 340.659,298.623   331.928,297.329 328.047,298.623 318.668,298.623 309.29,298.623 289.563,298.623 273.394,298.623 262.397,298.623 243.317,297.329   235.232,298.623 227.794,300.887 218.416,300.887 212.271,299.27 195.132,300.887 187.694,300.887 178.962,300.887 164.409,300.887   149.533,300.887 137.567,303.15 123.338,303.15 97.79,303.15 87.118,303.15 73.859,304.444 58.659,304.444 40.226,304.444   21.146,302.827 13.708,296.035 5.946,289.567 2.065,282.13 0.125,262.402 0.125,228.77 0.125,201.281 0.125,171.529 4.006,147.274   3.359,122.373 3.359,106.526 4.006,92.621 8.21,70.63 11.444,42.495 15.325,24.708 15.325,17.27 18.882,9.832 z'
    }

}
var colorAttributeMap = {};
var drawn = false;
var choosenColor;

    function drawOnPaper(r) {
       var cir = r.circle(50,50,10);
        cir.attr({
                cursor: 'pointer',
                fill: choosenColor
            })
        for (var country in paths) {
            var path = r.path(paths[country].path);
            path.node.id = country;
            if (drawn == false) {
                colorAttributeMap[country] = 'none';
            }

            $(path.node).click({
                rObj: path
            },

            function (e) {
                colorAttributeMap[path.node.id] = choosenColor;
                clearObjects(e.data.rObj.paper);
                drawOnPaper(e.data.rObj.paper);

            });
            console.log("Path " + country + " Color " + colorAttributeMap[country]);
            path.attr({
                cursor: 'pointer',
                fill: choosenColor
            })
        }
        if (drawn == false) {
            drawn = true;
        }

    }


function clearObjects(r){
           r.clear();
    }

jQuery(function($) {
        var r = Raphael(document.getElementById("map"), 1550, 750);
        r.setViewBox(0, 0, 612, 792);
        drawOnPaper(r);
        $('body').delegate( '.Color',"click",function(){
                var a=$(this).html();       
                choosenColor    = a;
        });

    });

HTML:

<body>
    <div id="main">
        <div id="left">
            <table id="table">
                <tr>
                    <td>Click on label of red area and then clcik on the path </td>
                </tr>
                <tr>
                    <td>Fill it with following image</td>
                    <td bgcolor="red"><a class="Color" value="url(http://media.balenciaga.com/images/10x10/SWATCH_D94J4_1000_A_10x10.jpg)">url(http://media.balenciaga.com/images/10x10/SWATCH_D94J4_1000_A_10x10.jpg)</a>


            </table>
        </div>
        <div id="map"></div>
    </div>
</body>

CSS:

body {
    margin: 1em;
    text-align: center
}
svg {
    background: #ffc;
    height: 800px
}
path {
    fill: transparent;
    stroke: black;
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
}

Ron van der Heijden · Accepted Answer · 2013-04-10T12:06:11.770

1

First

If you want to click on the path, you need to fill it, else you only can press the stroke.

var choosenColor = '#ffc';

Second

You need to set the fill attr for the node, not the reference:

$(path.node).attr({
    cursor: 'pointer',
    fill: choosenColor
})

Third

Remove the fill from the css

path {
    fill: transparent;
}

Fourth

Draw the circle after the rectangles. You want to circle on top.

Example

http://jsfiddle.net/bGrB7/14/

I hope this is what you want.

edited Apr 10 '13 at 12:06

answered Apr 10 '13 at 11:41

Ron van der Heijden

14,803
7
58
82

I want both to be colored. and also I clicked on the path. – kinkajou Apr 10 '13 at 11:47
you can see if you inspect that both path and circle gets fill attribute with the given colour but path does not get filled with the color whereas circle does. – kinkajou Apr 10 '13 at 11:58
You fixed your problem? (I'm just curious) – Ron van der Heijden Apr 10 '13 at 12:07
yes but I still have problem with which path is above which one. If I have more path then there is still isssue. But for this it solved. – kinkajou Apr 10 '13 at 12:10
1

Remember, the last drawn path is the topmost. You can change the order by using [jQuery.insertBefore()](http://api.jquery.com/insertBefore/). Usage you can find in this helpfull [answer](http://stackoverflow.com/questions/6566406/svg-re-ordering-z-index-raphael-optional#6585901) – Ron van der Heijden Apr 10 '13 at 12:13
Actually I need to store the id of the clicked path and its respective image and redraw it. I am doing this because raphael js by default does not support inserting patter(or I am wrong) after image is drawn. – kinkajou Apr 10 '13 at 12:15
1

I'm not sure if I understand you right. I give it a try with this example I made: http://jsfiddle.net/qnBa3/ – Ron van der Heijden Apr 10 '13 at 12:26