2

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!

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.