Can responsive SVG reposition element without scaling them?

Issue

Giving this simple SVG :

svg {
  background-color: lightblue;
}
<p>Normal size :</p>
<svg viewBox="0 0 60 40" width="60" height="40" xmlns="http://www.w3.org/2000/svg">
  <circle cx="10" cy="10" r="5"/>
  <circle cx="30" cy="10" r="5"/>
  <circle cx="50" cy="10" r="5"/>
  <circle cx="10" cy="30" r="5"/>
  <circle cx="30" cy="30" r="5"/>
  <circle cx="50" cy="30" r="5"/>
</svg>

What I want to do, and I’m not sure SVG can do it, is that if with css I make my svg 3 times larger (60px => 180px), it will take the whole space BUT not doing a simple scale/zoom like effet tha happens when preserving aspect ratio. I need to keep my circles with 5px radius, and just increasing the space between them.

To go from this enter image description here to this enter image description here

Solution

As commented by @ccprog: the primitives <rect>, <circle>, <ellipse> and <line> support percentage values.

Apply padding to the parent svg to set fixed x an y offsets (eg. 10px/svg user units).

* {
  box-sizing: border-box;
}

.resize {
  resize: both;
  overflow: auto;
  padding: 1em;
  border: 1px solid #ccc;
}

svg {
  background-color: lightblue;
  padding: 0 10px;
  overflow: visible;
}

.svg2 {
  padding: 10px;
}
<p>resize me :</p>
<div class="resize">
  <svg id="svg" width="100%" height="40" xmlns="http://www.w3.org/2000/svg">
    <circle cx="0" cy="10" r="5" />
    <circle cx="0" cy="30" r="5" />

    <circle cx="50%" cy="10" r="5" />
    <circle cx="50%" cy="30" r="5" />

    <circle cx="100%" cy="10" r="5" />
    <circle cx="100%" cy="30" r="5" />
  </svg>

</div>

<div class="resize">
  <svg class="svg2" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <!-- align path center to x/y =0 by adding viewBox offset width/2 height/2 -->
    <symbol class="icon icon-home" id="iconHome" viewBox="20 20 40 40" overflow="visible">
        <path d="M36.4 22.2l-5.2 0l0 13l-3.4 0l0-16.7l-7.7-8.7l-7.7 8.7l0 16.7l-3.4 0l0-13l-5.2 0l16.4-17.4z"></path>
     </symbol>

    <use x="0" y="0%"  href="#iconHome" width="20" height="20" />
    <use x="0" y="100%" href="#iconHome" width="20" height="20" />
    
    <use x="50%" y="0%"  href="#iconHome" width="20" height="20" />
    <use x="50%" y="100%" href="#iconHome" width="20" height="20" />
    
    <use x="100%" y="0%"  href="#iconHome" width="20" height="20" />
    <use x="100%" y="100%" href="#iconHome" width="20" height="20" />
  </svg>
</div>

You can also apply percentage values for <path> elements by wrapping paths in a <symbol> element (2nd example).

Answered By – herrstrietzel

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published