Preserve aspect ratio for SVG Text

I know this is an old question but I did find a way to do what is asked in pure SVG, no JS, and I've used it in prod without issues!

The trick is to define a parent <svg> element without a viewBox so that it takes the container's dimensions, and then define children <svg> elements for the different kind of preserveAspectRatio values that you want!

In the following snippet, I just took the SVG used in the question and put all the <polygon> appart in a <svg viewBox="0 0 100 100" preserveAspectRatio="none">.

div {
  height: 112px;
  width: 200px;
}

div > svg {
  height: 100%;
  width: 100%;
  background-color: whitesmoke;
}

polygon {
  fill: none;
  stroke: black;
  stroke-width: 0.1;
}
<div>
  
  <!-- SVG wrapper without viewBox to take parent's dimensions -->
  <svg>
  
    <!-- sub SVG that will be resized -->
    <svg viewBox="0 0 100 100" preserveAspectRatio="none">
      <g>
        <polygon points="0,0 100,0 65,35 35,35"></polygon>
        <text x="42" y="20"></text>
      </g>
      <g>
        <polygon points="100,0 100,100 65,65 65,35"></polygon>
        <text x="81" y="53"></text>
      </g>
      <g>
        <polygon points="0,100 35,65 65,65 100,100"></polygon>
        <text x="42" y="91"></text>
      </g>
      <g>
        <polygon points="0,0 35,35 35,65 0,100"></polygon>
        <text x="5" y="53"></text>
      </g>
    </svg>
    
    <!-- regular SVG elements that won't be resized -->
    <text id="ok_text" 
          x="50%" y="50%" 
          text-anchor="middle" 
          alignment-baseline="middle">
      OK
    </text>
    
  </svg>
</div>


Questions: How can you make the tag keep it's aspect ratio, while changing the aspect ratio of the svg?

You cannot. If the text is part of the SVG it gets scaled with the SVG. There is no way to make a part of the SVG exempt from the scaling.

Possible solutions:

(1) Remove the text from the SVG and position it on top. For example use a positioned <div> in your HTML or something.

(2) Use JS to calculate the aspect ratio of the SVG and apply an inverse scaling transform to the <text> element.

Tags:

Javascript

Html

Css

Jquery

Svg

Recent Posts