CODEWITHSUNDEEP
javascriptsvgraphaelvector-graphics
kinkajou
kinkajou

Reputation: 3728

SVG file using raphael is not rendered

I have following SVG file. It is rendered well when saved as SVG but when I use raphael to plot svg using this tutorial it won't show. I think it's because scale or dimension issue but don't know how to solve this.

 <?xml version="1.0" encoding="iso-8859-1"?>
    <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" preserveAspectRatio="xMinYMin meet" width="100%" height="100%" viewBox="79.553674 -31.027755 9.149489 5.259533">
    <g id="Cluster_region" style="display:inline;fill-rule:evenodd">
    <desc>Layer Cluster_region</desc>
    <path id="1" d="M83.502064,-28.809384 l -0.000769,-0.002363 0.0,0.012758 0.026895,-0.001343 0.04841,0.038272 -0.015368,0.026186 -0.021516,0.047001 0.023821,0.034243 0.016137,0.058416 0.055326,0.010743 0.019211,0.014771 0.011526,-0.0047 0.030737,-0.055729
     0.031505,-0.044987 0.015368,-0.015443 0.034579,-0.007386 0.01921,-0.016786 0.05379,-0.013428 0.027663,-0.019472 0.029968,-0.036258 0.024589,-0.003357 0.0,-0.038944 0.016906,-0.012086 0.021515,0.0 0.043032,0.03693 0.005379,-0.015444 0.022284,-0.008057
     0.016136,-0.024172 0.021516,-0.006043 -0.002305,-0.024171 0.017674,-0.010072 0.031505,-0.002014 0.031505,0.008728 0.026896,-0.020143 0.02382,-0.006714 0.037652,-0.116159 -0.015368,-0.015443 -0.037652,0.002685 -0.015369,-0.027529 0.013064,-0.046655
     -0.047642,-0.069791 0.039958,-0.046975 -0.067622,0.004026 -0.00922,-0.052343 -0.093748,0.002684 -0.03842,-0.033553 -0.067622,-0.010737 -0.073768,0.04429 -0.007684,0.042949 -0.099894,0.002684 -0.049178,0.036238 0.014599,0.032178 -0.00999,0.049204
     -0.041494,0.010785 -0.001537,0.014154 -0.006147,0.097734 -0.053021,0.047181 -0.063779,0.062011 0.005379,0.031679 -0.025358,0.008088 0.006916,0.031679 Z" style="fill:white;stroke:black;stroke-width:0.014477;"/>
    </g>

Using Raphael: path file

  <html>
<head>

   <script src="http://raphaeljs.com/raphael.js" type="text/javascript"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

   <script>
    var paths = {
        tp : {
              name : 'tp',
              path : 'M83.267697,-28.73143 l 0.047641,-0.012755 0.049948,0.006042 0.0,-0.018798 0.109115,-0.027525 -0.002306,-0.048336 0.023822,-0.040951 0.089136,-0.104058 0.023821,-0.012755 0.0,-0.111442 0.010759,-0.004384 0.036884,-0.040155 -0.113724,-0.032124  -0.036884,-0.04551 -0.063012,-0.056217 -0.023051,-0.065586 -0.089137,-0.137866 -0.050716,0.004015 -0.027664,-0.08031 -0.03842,-0.013385 -0.067618,-0.022047 -0.086064,0.0 -0.064544,-0.047786 -0.156764,-0.015929 -0.165976,-0.082298 -0.006148,-0.076989  -0.055328,0.010619 0.0,-0.037167 -0.064544,-0.090263 -0.04918,0.010619 -0.172124,-0.090262 -0.184424,-0.042477 0.003076,-0.108846 -0.05379,-0.063715 0.027664,-0.078981 -0.036116,-0.039822 -0.064548,0.05907 -0.15061,-0.080308 -0.0584,-0.009292  -0.067621,0.003318 -0.016905,-0.029866 -0.092978,-0.031858 -0.007684,0.03584 -0.051485,-0.019911 -0.003842,0.047787 -0.059168,0.018583 -0.034579,-0.033849 -0.029967,-0.018583 -0.027664,-0.002655 0.021516,0.031858 -0.026126,0.016592 0.006915,0.026651  0.023053,0.021305 -0.018442,0.089215 -0.041495,0.054595 -0.079915,0.037284 0.003049,0.075298 0.000025,-0.000031 0.0,-0.008286 0.000767,0.007312 -0.000767,0.000974 0.0,0.000633 -0.000025,-0.000602 -0.010733,0.01362 0.033042,0.013959 0.04841,0.003989  0.082989,0.009306 0.023053,0.039884 -0.012295,0.027254 -0.000768,0.05052 0.027663,0.005318 0.012294,-0.026589 0.030737,-0.019942 0.0584,0.0 0.003073,-0.009306 0.076075,-0.001994 0.019209,0.001994 0.026895,0.022607 0.089136,0.012032 -0.016904,0.110958  -0.038421,0.016042 -0.051485,0.107619 0.016138,0.05645 0.078377,0.022177 0.009221,0.045026 -0.023052,0.036961 0.026894,0.035618 -0.003073,0.096099 -0.042263,0.008064 -0.006916,0.045026 -0.057631,0.022177 -0.066084,-0.005377 -0.000769,-0.034273  -0.017674,-0.01008 -0.041494,0.015456 -0.017674,0.001344 -0.010757,0.016801 -0.063779,0.057123 0.028431,0.028225 -0.019978,0.022848 0.009988,0.058466 0.026896,-0.004032 0.013063,0.022849 0.04841,-0.003361 0.000769,0.021505 -0.017674,0.069219  0.096052,-0.004032 0.037653,0.020832 0.073768,0.011425 0.046105,0.035617 0.051484,-0.00336 0.059937,0.009408 0.01921,-0.01344 0.034579,-0.040994 0.035347,0.001344 0.029201,0.052418 0.029967,0.008065 0.040726,-0.053762 0.114495,-0.09946 0.039189,-0.00336  0.139852,0.028225 -0.022284,0.094755 0.049179,0.007393 0.066084,-0.020161 0.149072,0.056222 0.0438,0.052364 -0.005379,0.052364 0.031505,0.0 0.026127,0.033567 0.022284,0.000671 0.152915,-0.01007 0.042264,0.027525 0.099125,0.020812 0.037652,0.032224  0.030737,-0.002014 0.061474,0.023497 0.026126,-0.015441 0.034579,0.022154 Z'
        }

    }
   </script>

   <script>
    window.onload = function(){   
        var r = Raphael('map', 1200, 820),
                    // create a canvas object on which to draw our paths
            attributes = {
                fill: '#fff',
                stroke: '#3899E6',
                'stroke-width': 1,
                'stroke-linejoin': 'round'
            },
            // create 'attributes' object with parameters
            arr = new Array();

            for (var country in paths) {
                var obj = r.path(paths[country].path); 
                obj.attr(attributes);
            }
    }
   </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

But If I use following path it would work :

M83.502064,-28.809384 l -0.000769,-0.002363 0.0,0.012758 0.026895,-0.001343 0.04841,0.038272 -0.015368,0.026186 -0.021516,0.047001 0.023821,0.034243 0.016137,0.058416 0.055326,0.010743 0.019211,0.014771 0.011526,-0.0047 0.030737,-0.055729  0.031505,-0.044987 0.015368,-0.015443 0.034579,-0.007386 0.01921,-0.016786 0.05379,-0.013428 0.027663,-0.019472 0.029968,-0.036258 0.024589,-0.003357 0.0,-0.038944 0.016906,-0.012086 0.021515,0.0 0.043032,0.03693 0.005379,-0.015444 0.022284,-0.008057  0.016136,-0.024172 0.021516,-0.006043 -0.002305,-0.024171 0.017674,-0.010072 0.031505,-0.002014 0.031505,0.008728 0.026896,-0.020143 0.02382,-0.006714 0.037652,-0.116159 -0.015368,-0.015443 -0.037652,0.002685 -0.015369,-0.027529 0.013064,-0.046655  -0.047642,-0.069791 0.039958,-0.046975 -0.067622,0.004026 -0.00922,-0.052343 -0.093748,0.002684 -0.03842,-0.033553 -0.067622,-0.010737 -0.073768,0.04429 -0.007684,0.042949 -0.099894,0.002684 -0.049178,0.036238 0.014599,0.032178 -0.00999,0.049204  -0.041494,0.010785 -0.001537,0.014154 -0.006147,0.097734 -0.053021,0.047181 -0.063779,0.062011 0.005379,0.031679 -0.025358,0.008088 0.006916,0.031679 Z

Upvotes: 0

Views: 556

Answers (1)

dan-lee
dan-lee

Reputation: 14492

You need to set Paper.setViewBox() like in the SVG.
It works like panning and zooming the whole view. Otherwise your path is just out of bound and you can't see it.

Some more tutorials/further reading for you

Upvotes: 2

Related Questions