Scaling SVG while preserving aspect ratio of embedded SVG

I am trying to build a map with a SVG. It should be possible to scale the whole map without keeping the aspect ration. However the aspect ratio of the markers should be preserved.

Following SVG is doing would I want:

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="225" style="width: 100%; height: 5em">
  <svg preserveAspectRatio="xMidYMax meet" x="26.9%" width="100" y="56.7%" height="20" class="city">
    <circle cx="5" cy="15" r="2" style="fill:red" id="TH-10" name="Bangkok" />
    <text x="10" y="17">Bangkok</text>
  </svg>
  <svg preserveAspectRatio="xMidYMax meet" x="43.8%" width="100" y="32.7%" height="20" class="city">
    <circle cx="5" cy="15" r="2" style="fill:red" id="LA-VT" name="Vientiane" />
    <text x="10" y="17">Vientiane</text>
  </svg>
  <svg preserveAspectRatio="xMidYMax meet" x="61.5%" width="100" y="68.7%" height="20" class="city">
    <circle cx="5" cy="15" r="2" style="fill:red" id="KH-12" name="Phnom Penh" />
    <text x="10" y="17">Phnom Penh</text>
  </svg>
  <svg preserveAspectRatio="xMidYMax meet" x="68.5%" width="100" y="14%" height="20" class="city">
    <circle cx="5" cy="15" r="2" style="fill:red" id="VN-HN" name="Ha Noi" />
    <text x="10" y="17">Ha Noi</text>
  </svg>
  <svg preserveAspectRatio="xMidYMax meet" x="75%" width="100" y="71.3%" height="20" class="city">
    <circle cx="5" cy="15" r="2" style="fill:red" id="VN-SG" name="Ho Chi Minh" />
    <text x="10" y="17">Ho Chi Minh</text>
  </svg>
</svg>

As I want to add more markers without having to calculate the relative coordinates, I added a new user coordinate system with viewBox="97.3436 -23.3932 12.116 17.78" (representing the geo-coordinates) and gave it a try by changing the coordinates of the city-SVGs:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="97.3436 -23.3932 12.116 17.78" width="12.116em" height="17.78em" style="width: 100%;height:5em;border:1px solid dimgray;" preserveAspectRatio="none">
  <svg x="105.854167" y="-21.028472" class="city" viewBox="0 0 100 10" height="1em" preserveAspectRatio="xMinYMin">
    <circle cx="2" cy="5" r="1" style="fill:red" id="VN-HN" name="Ha Noi" />
    <text x="5" y="8" font-size="10">Ha Noi</text>
  </svg>
  <svg x="106.7017555" y="-10.7758439" class="city" viewBox="0 0 100 10" height="1em" preserveAspectRatio="xMinYMin">
    <circle cx="2" cy="5" r="1" style="fill:red" id="VN-SG" name="Ho Chi Minh" />
    <text x="5" y="8" font-size="10">Ho Chi Minh</text>
  </svg>
</svg>

Unfortunately that isn’t working and I’m not having any idea how to solve this problem. Is it possible and what needs to be changed?

Many thanks in advance!

Answer

In your second example, try this:

style="width: 660px;height:252px;border:1px solid dimgray;" preserveAspectRatio="xMinYMin">

  • Set both the width and height of the drawing to a specific dimension that is a multiple of the coordinate system extents. Your coordinate system is approx 110 units wide and 42 units high (so if you want it 6x scale, make it 660px by 252px).

  • Force the aspect ratio using e.g. xMinYMin

This way, the full drawing maintains the proper aspect ratio and is not cropped.

Attribution
Source : Link , Question Author : Mue , Answer Author : Yorik

Leave a Comment