Scaling icon (<use>) to screen size independently of viewBox

I'm creating a map-like display using an SVG image. I've plotted a bunch of cities using their lat,lng coordinates, and I want to use the viewBox to zoom and pan on the map. I want to use icons for these cities, and the use element seems ideal for this.

I'd like for the size of these icons to stay the same regardless of the size of the viewBox. Say, big cities should always have a width of 1cm on screen, smaller cities could be 0.8cm, etc.

I get the impression from the documentation that the units can be either px or for example cm or em. But is there a way to mix different coordinate systems to achieve what I want? When I set the width and height of the use element to 1cm or 1em, they seem to become way too big.

My testing svg so far:

<svg width="80vw" height="80vh" version="1.0" viewBox="4.34 -52.45 0.85 0.5" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <svg version="1.0" viewBox="-1.2 -1.2 2.4 2.4" xmlns="http://www.w3.org/2000/svg" id="icon">
      <!--<rect x="-1" y="-1" width="2" height="2" fill="red"/> -->
      <polygon points="0,1 0.866,-0.5 -0.866,-0.5" fill-opacity="0.5" stroke-width="10%" stroke="currentColor" fill="currentColor" stroke-linejoin="round" color="deepskyblue" />
    </svg>
  </defs>
  <rect x="4.34" y="-52.45" width="100%" height="100%" fill="none" stroke="currentColor" stroke-width="0.001"/> <!-- show viewBox -->
  <g  transform="scale(1,-1)"> <!-- flip y coordinates so I can plot lat lng easily-->
    
    <!-- the circles indicate the positions I want the icons to have -->
    <circle r="0.020" cx="4.900000" cy="52.378333" />
    <circle r="0.016" cx="5.109900" cy="52.089300" />
    <circle r="0.010" cx="4.356165" cy="52.006627" />
    
    <use href="#icon" x="4.900000" y="52.378333" width="10%" height="10%" /> <!-- so far I've found using percentages comes closest to what I want, but I can't use them in a transform to center the icon -->
    <!-- <use href="#icon" x="4.900000" y="52.378333" width="1cm" height="1cm" /> WAY too big -->
    <use href="#icon" x="5.109900" y="52.089300" width="0.032" height="0.032" />
    <use href="#icon" x="4.356165" y="52.006627" width="0.020" height="0.020" transform="translate(-0.01 -0.01)" />
    
  </g>
</svg>

Scaling icon (<use>) to screen size independently of viewBox

0 Answers