如何根据div的宽度和高度将转换设置为svg路径？

Question

I'm using the svg paths in my project and i need to resize the paths using transform based on the svg container div's height and width. I tried using viewbox but it also set transform to label text. I have googled a lot but i didn't found anything.

Here is my SVG

<div id="container">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
        <path fill="#f0f0f0" stroke="#c8c8c8" transform="matrix(1.2,0,0,1.2,10,10)" d="M38.52,55.26L38.980000000000004,53.94L39.160000000000004,54.39L39.81,54.69L40.85,53.949999999999996L41.28,54.54L41.980000000000004,54.51L42.150000000000006,53.739999999999995L41.230000000000004,52.17999999999999L42.02,51.43999999999999L41.93,50.07999999999999L42.42,49.68999999999999L42.32,48.65999999999999L43.13,48.389999999999986L43.18,48.889999999999986L43.66,49.29999999999998L44.61,48.98999999999998L44.519999999999996,48.30999999999998L43.169999999999995,46.65999999999998L42.269999999999996,46.80999999999998L40.38999999999999,46.24999999999998L40.559999999999995,44.26999999999998L41.21999999999999,44.79999999999998L41.739999999999995,44.72999999999998L42.029999999999994,44.16999999999998L41.87,43.49999999999998L45.169999999999995,42.979999999999976L45.42999999999999,42.28999999999998L43.72999999999999,41.32999999999998L42.86999999999999,41.189999999999976L42.49999999999999,39.67999999999998L41.79999999999999,39.25999999999998L40.98999999999999,39.239999999999974L41.30999999999999,34.50999999999998L40.819999999999986,33.229999999999976L40.91999999999999,32.53999999999998L40.51999999999999,32.199999999999974L41.27999999999999,26.459999999999972L41.149999999999984,23.99999999999997L40.69999999999998,23.37999999999997L40.539999999999985,22.01999999999997L39.889999999999986,20.68999999999997L39.15999999999999,20.11999999999997L38.83999999999999,17.66999999999997L39.18999999999999,15.39999999999997L39.03999999999999,14.28999999999997L40.779999999999994,10.98999999999997L40.25999999999999,9.75999999999997L44.849999999999994,13.65999999999997L46.03999999999999,14.03999999999997L46.959999999999994,14.78999999999997L47.769999999999996,16.08999999999997L49.629999999999995,17.169999999999973L52.87,18.079999999999973L53.71,18.849999999999973L55.13,18.959999999999972L56.86,19.979999999999972L59.19,20.709999999999972L60.65,20.239999999999974L61.17,20.529999999999973L61.72,21.219999999999974L61.69,22.309999999999974L62.239999999999995,23.049999999999972L62.55,23.15999999999997L63.04,22.80999999999997L63.11,22.05999999999997L63.56,22.08999999999997L64.19,23.479999999999972L63.79,24.05999999999997L64.13,24.54999999999997L64.69,24.50999999999997L65.41,23.66999999999997L65.03,21.96999999999997L66.06,21.729999999999972L65.62,21.959999999999972L65.41000000000001,22.649999999999974L66.68,27.059999999999974L66.22000000000001,27.159999999999975L64.55000000000001,28.889999999999976L64.77000000000001,27.599999999999977L64.55000000000001,27.189999999999976L63.24000000000001,27.499999999999975L62.86000000000001,28.309999999999974L62.95000000000001,29.259999999999973L61.58000000000001,30.959999999999972L59.600000000000016,32.339999999999975L58.54000000000001,33.74999999999997L57.58000000000001,34.43999999999997L56.48000000000001,36.10999999999997L56.42000000000001,36.81999999999997L57.040000000000006,37.41999999999997L58.00000000000001,37.53999999999997L60.77000000000001,37.059999999999974L61.99000000000001,36.479999999999976L61.96000000000001,35.77999999999997L61.32000000000001,35.549999999999976L58.38000000000001,36.339999999999975L58.03000000000001,36.03999999999998L61.260000000000005,32.619999999999976L64.32000000000001,31.739999999999977L65.21000000000001,30.229999999999976L66.94000000000001,28.689999999999976L67.47000000000001,29.259999999999977L68.01000000000002,29.069999999999975L68.23000000000002,27.259999999999977L68.17000000000002,29.509999999999977L68.43000000000002,30.419999999999977L67.44000000000003,30.209999999999976L66.80000000000003,30.979999999999976L66.39000000000003,30.249999999999975L65.87000000000003,30.059999999999974L65.48000000000003,30.699999999999974L65.78000000000003,31.409999999999975L65.80000000000003,33.03999999999998L65.59000000000003,31.969999999999978L64.92000000000003,31.759999999999977L64.45000000000003,32.449999999999974L64.38000000000004,33.199999999999974L64.84000000000003,33.85999999999997L64.21000000000004,34.43999999999997L64.21000000000004,34.88999999999997L64.63000000000004,35.059999999999974L66.31000000000004,34.489999999999974L66.56000000000004,35.57999999999998L65.48000000000005,37.369999999999976L65.40000000000005,38.41999999999997L64.57000000000005,39.119999999999976L64.70000000000005,40.119999999999976L63.850000000000044,39.439999999999976L64.97000000000004,37.99999999999998L64.74000000000004,37.03999999999998L62.78000000000004,38.119999999999976L62.400000000000034,38.75999999999998L62.35000000000004,36.64999999999998L61.830000000000034,36.66999999999998L60.80000000000003,38.259999999999984L59.540000000000035,38.789999999999985L58.400000000000034,40.65999999999998L56.890000000000036,40.95999999999998L56.430000000000035,41.38999999999998L56.220000000000034,42.56999999999998L57.330000000000034,42.53999999999998L57.080000000000034,42.89999999999998L57.35000000000004,43.269999999999975L58.28000000000004,43.28999999999998L58.34000000000004,43.96999999999998L58.87000000000004,44.439999999999976L59.39000000000004,44.16999999999997L59.740000000000045,42.409999999999975L59.880000000000045,42.82999999999998L60.71000000000004,42.67999999999998L61.82000000000004,44.159999999999975L63.130000000000045,43.549999999999976L64.78000000000004,42.06999999999998L65.76000000000005,40.50999999999998L66.39000000000004,41.28999999999998L67.12000000000005,41.42999999999998L67.56000000000004,41.19999999999998L67.50000000000004,40.33999999999998L69.06000000000004,39.789999999999985L69.41000000000004,38.84999999999999L69.08000000000004,37.579999999999984L69.30000000000004,36.389999999999986L69.12000000000003,35.02999999999999L69.95000000000003,35.22999999999999L70.25000000000003,34.30999999999999L70.06000000000003,33.55999999999999L69.34000000000003,32.929999999999986L70.23000000000003,31.799999999999986L70.30000000000003,30.049999999999986L71.54000000000002,28.809999999999988L72.15000000000002,27.439999999999987L73.76000000000002,26.94999999999999L74.54000000000002,25.78999999999999L74.09000000000002,25.12999999999999L73.58000000000001,25.10999999999999L72.72000000000001,23.809999999999988L72.88000000000001,21.719999999999988L72.62,20.849999999999987L73.11,20.059999999999988L73.17,19.219999999999988L72.02,17.489999999999988L71.39,17.08999999999999L71.22,16.44999999999999L71.4,15.949999999999989L71.99000000000001,16.17999999999999L72.52000000000001,15.849999999999989L72.76,14.049999999999988L73.55000000000001,13.809999999999988L73.85000000000001,12.809999999999988L73.24000000000001,10.489999999999988L73.68,9.959999999999988L73.65,9.099999999999989L72.69000000000001,8.219999999999988L71.74000000000001,8.519999999999989L70.65,5.859999999999989L71.58000000000001,4.029999999999989L112.89000000000001,13.429999999999989L151.85000000000002,21.07999999999999L142.19000000000003,75.47L141.72000000000003,76.49L142.76000000000002,79.49L142.89000000000001,81.49L141.89000000000001,82.78999999999999L142.62,84.66999999999999L111.44,78.74999999999999L109.77,79.53999999999999L102.53,78.52L100.85,79.44L96.66,79.32L93.47999999999999,79.77L91.83999999999999,80.52L90.96,80.25999999999999L89.75999999999999,80.55999999999999L88.24999999999999,80.32999999999998L85.81999999999998,79.38999999999999L84.90999999999998,79.84999999999998L81.45999999999998,80.35999999999999L79.34999999999998,79.64999999999999L77.69999999999997,79.94999999999999L77.38999999999997,78.58999999999999L76.29999999999997,77.71L71.95999999999997,76.25L69.63999999999997,76.14L68.48999999999997,75.63L67.21999999999997,75.83999999999999L65.32999999999997,76.69999999999999L60.82999999999997,77.27999999999999L59.71999999999997,76.57L58.56999999999997,76.27L56.95999999999997,75.11999999999999L55.11999999999997,74.60999999999999L54.48999999999997,73.79999999999998L55.12999999999997,66.97999999999999L54.65999999999997,66.02999999999999L54.43999999999997,64.12999999999998L53.45999999999997,62.77999999999998L51.49999999999997,61.10999999999998L48.67999999999997,60.99999999999998L47.64999999999997,59.689999999999976L47.49999999999997,58.63999999999998L46.93999999999997,58.00999999999998L44.57999999999997,57.699999999999974L44.01999999999997,57.39999999999998L43.779999999999966,56.60999999999998L43.279999999999966,56.42999999999998L42.30999999999997,56.77999999999998L41.46999999999996,56.51999999999998L40.36999999999996,56.91999999999998L39.39999999999996,55.44999999999998L38.50999999999996,55.22999999999998ZM61.85,39.78L62.01,40.52L61.589999999999996,41.010000000000005L61.589999999999996,40.10000000000001L61.849999999999994,39.790000000000006ZM71.27,20.38L70.66,21.25L70.50999999999999,21.77L70.61999999999999,20.759999999999998L71.27,20.38ZM71.14,15.62L71.05,15.569999999999999L71.1,15.53L71.14,15.629999999999999ZM70.37,15.48L69.60000000000001,15.870000000000001L69.97000000000001,15.190000000000001L69.90000000000002,14.590000000000002L70.12000000000002,14.520000000000001L70.37000000000002,15.490000000000002ZM57.56,42.45L57.61,42.43L57.6,42.44L57.56,42.46ZM67.75,19.23L69.48,17.13L69.95,17.11L70.48,18.82L70.13000000000001,18.27L69.62,18.15L69.07000000000001,18.59L68.72000000000001,18.5L68.37000000000002,19.23L67.74000000000002,19.22ZM67.87,20.4L68.31,20.4L68.92,20.9L69,21.25L68.21,21.05L67.88,20.400000000000002ZM68.84,23.16L68.74000000000001,23.67L68.74000000000001,23.67L68.72000000000001,23.430000000000003L68.84000000000002,23.150000000000002ZM69.15,25.42L69.23,25.46L69.35000000000001,25.42L69.19000000000001,25.53L69.14000000000001,25.43ZM69.52,25.33L70,24.4L71.02,25.61L71.13,26.73L70.78999999999999,27.09L70.44999999999999,27L70.17999999999999,25.45L69.50999999999999,25.33ZM66.34,9.97L66.82000000000001,9.63L67.00000000000001,11.14L66.78000000000002,11.09L66.34000000000002,9.969999999999999ZM68.04,9.66L68.87,10.46L68.22,10.770000000000001L68.03999999999999,9.660000000000002ZM66.69,38.03L67.03,36.96L67.24,36.71L67.21,37.78L66.69,38.04ZM66.99,33.31L67.08999999999999,32.27L67.43999999999998,31.930000000000003L67.20999999999998,33.49L66.98999999999998,33.31ZM66.51,14.27L66.10000000000001,13.87L66.7,13.12L66.52,13.729999999999999L66.50999999999999,14.28ZM66.68,14.62L67.08000000000001,14.819999999999999L67.00000000000001,14.939999999999998L66.71000000000001,14.819999999999999L66.68,14.62ZM66.74,12.96L66.72999999999999,12.860000000000001L66.77999999999999,12.740000000000002L66.73999999999998,12.970000000000002ZM64.36,13.12L63.3,12.299999999999999L63.489999999999995,10.489999999999998L64.82,12.409999999999998L64.47,12.589999999999998L64.36,13.129999999999999ZM62.18,42.55L62.41,42.3L62.43,42.309999999999995L62.3,42.62L62.18,42.55ZM60.04,40.3L59.949999999999996,40.11L59.989999999999995,40.04L59.989999999999995,40.17L60.03999999999999,40.31Z" stroke-width="1" opacity="1.0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1;"></path>
        <text x="120" y="60" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#000000" font-size="12px" font-style="normal" font-weight="normal" font-family="Arial" opacity="1.0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: Arial; opacity: 1;">
            <tspan dy="4.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">WA</tspan>
        </text>
    </svg>

Here is my DEMO.

In the above demo clicking maximize button will increase the div size, path size also should change correspondingly, how to do this?

Any suggestions will be appreciated.

Thanks,
KarthiK.

Answer 1

I have made a little DEMO . It is not perfect but works, you will need to use some more math and calculations to get it to work with your path.

var paper = Raphael("container");

var p1 = paper.path('M 190 162 L 331 124.2 L 281.9 48.5Z M 190 162 L 197.6 16.2 L 110.5 39.6Z M 190 162 L 53.7 109.7 L 49 199.8Z M 190 162 L 98.1 275.5 L 182.4 307.8Z M 190 162 L 269.5 284.4 L 326.3 214.3Z');

p1.attr({'stroke':'blue',fill:'orange'});                                                                                                  

$("#min").click(function () 
{
    rel = ($("#container").width()-100)/$("#container").width();

    $("#container").width(($("#container").width()-100)+"px");
    $("#container").height(($("#container").height()-100)+"px");

    paper.setSize($("#container").width(),$("#container").height());

    p1.scale(rel);
    p1.translate( (-1*p1.getBBox().x) ,(-1*p1.getBBox().y));
});

$("#max").click(function () 
{
    rel = ($("#container").width()+100)/$("#container").width();

    $("#container").width(($("#container").width()+100)+"px");
    $("#container").height(($("#container").height()+100)+"px");

    paper.setSize($("#container").width(),$("#container").height());

    p1.scale(rel);
    p1.translate( (-1*p1.getBBox().x) ,(-1*p1.getBBox().y));
}); 

Hope it helped ;)

Answer 2

If you set an appropriate viewBox for your svg, the browser will do the correct scaling for you. For example, in this case:

viewBox="0 0 200 200"

http://jsfiddle.net/UeXRw/

Update: sorry I missed the bit about not wanting the label to scale.

How about this modified approach then:

http://jsfiddle.net/UeXRw/1/

It assumes you know beforehand what the sizes are going to be. If you don't know that then it just needs a little bit of maths. Something like:

$("#label").css("font-size", (12*minWidth/maxWidth)+"px");