SVG relative position

Question

I have the following svg shape. How can I make it relative to the div container?

fiddle: http://jsfiddle.net/8421w8hc/20/

<div>

    <svg  viewBox="0 0 1000 2112" style="" xmlns="http://www.w3.org/2000/svg" version="1.1">

        <path id="ma" stroke-linejoin="round" stroke-width="3" d="M276.53125,21.0625C270.2435,21.1337,264.6632,29.710064,257.625,38.15625C254.2095,42.255008000000004,246.70916,40.314622,242.1875,46.34375C236.65521,53.720438,230.99785,62.346888,226.46875,69.59375C215.85686,86.573459,230.16928,97.782258,212.125,111.1875C207.10965,114.77674999999999,201.08841999999999,115.97395,197.6875,119.375C192.96555,124.09715,192.80861,146.86201,183.5,153.84375C179.2572,157.02598,177.89186,161.88925,174.34375,165.4375C171.68483,168.09653,165.60417999999999,166.5658,163.375,170.28125C159.25578,177.1469,152.38471,200.19938,145.5625,203.6875C135.98604,208.58383,130.12789,210.84282,127.15625,215.15625C124.21798,219.42123,128.21307,221.02478,120.40625,232.65625C116.20943,238.90915,125.44735,245.58204,127.5,249.6875C130.03318,254.75407,121.95861,264.95404,121.4375,266.34375C116.03641999999999,273.13373,110.82711,279.75904,106.0625,286.90625C104.9172,288.62427,104.41387,291.14857,103,292.5625C101.23068,294.33189,100.92556,298.02625,99.375,300.09375C98.25112,301.59231,98.340978,305.27722,97.5625,307.09375C96.151137,310.38706,99.710576,316.2122,100.59375,319.15625C101.74974,323.00968,102.93777,328.35011,106.25,331C108.44205,332.75371,110.92774,335.24016,113,337.3125C115.21027,339.52286,119.50015,339.84377,122.125,341.34375C123.7939,342.29745,125.21469,344.74589,126.65625,346.1875C131.13587,350.66731,130.14474,359.6758,134.6875,364.21875C140.22073,369.7522,147.72669,372.17836,151.0625,379.40625C151.6216,380.61769,152.22093,382.11301,152.78125,383.75C153.30442,384.12705,153.81841,384.52134,154.34375,384.96875C159.49011,382.16219,192.47898,377.45858,194.125,375.8125C201.6757,368.26149,216.63142,331.12495,220.25,319.0625C223.11402,309.51541,224.60791,292.67363,231.75,285.53125C238.94927,278.33169,243.64201,268.57702,250.59375,261.625C255.44103,256.77752,268.37051,251.81277,270.40625,247.0625C272.02917,243.27554,261.87965,212.73681,268.09375,194.09375C273.12962,178.98553,292.55847,176.39929,295.6875,165.96875C298.4306,156.82473,307.59017,148.35643,312.5,138.78125C311.95901,138.28635,311.42663,137.7704,310.90625,137.25C306.57248,132.91606,301.96542,134.44373,297.34375,128.28125C294.72734,124.79256,299.28371,117.00322,296.53125,113.5625C293.76217,110.10102,290.4536,104.92346,289.03125,100.65625C286.52797,93.146115,292.375,82.479489,292.375,74.34375C292.375,72.274832,306.32062,71.292295,302.375,66.03125C298.36618,60.685944,297.79382,50.044012,293.28125,45.53125C290.88005,43.129956,297.01201,34.334683,294.71875,32.5C293.39881,31.444011,290.24045,33.879986,289.09375,31.96875C284.34165,24.048267,280.3039,21.019778000000002,276.53125,21.0625Z" stroke="#ffffff" fill="#e9eaee" style="cursor: default; stroke-linejoin: round;"></path>
    </svg>
</div>

Answer 1

I am assuming you want the map shapes on the left to all appear at the same place.

One way you can do that is to get the bounding box of the path and offset it by the x and y position.

$("path").hover(function() {
    var  bbox = this.getBBox();
    var d = $(this).attr("d");
    $("#city_map").html('<svg ... snip ...
      <path...  transform="translate('+(-bbox.x)+','+(-bbox.y)+')"></path></svg>');
});

Demo here