Clever Geek Handbook

How can I get my SVG path to scale?

I've done my best to bring this to a minimal working example, but please excuse the code wall at the bottom. I have a set of paths, in this particular case they write the word "DOG". I would like to scale them to fit in the box without keeping the aspect ratio. For example, with a suitable definition, DOG

I get:

 <g>
   <svg height="141.23" width="400.0" x="0.0" y="0.0">
     <rect height="100%" width="100%"
      stroke='black' fill='purple'/>
     <use xlink:href="#DOG"/>
   </svg>

   <svg height="73.34" width="210.81" x="189.18" y="273.94">
     <rect height="100%" width="100%"
       stroke='black' fill='purple'/>
     <use xlink:href="#DOG"/>
   </svg>
 </g>

enter image description here

I can't seem to figure out using preserveAspectRatio='none'

or any other tricks to get mine DOG

in the (bottom) window to match exactly. The result is always truncated. I can try to guess at viewBox

, but it's fragile, can't I do it at the top level of the DOM here?

The complete code for SVG is shown below:

<svg version="1.2" width="400.0pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g>
   <svg height="141.23" width="400.0" x="0.0" y="0.0">
     <rect height="100%" width="100%"
      stroke='black' fill='purple'/>
     <use xlink:href="#DOG"/>
   </svg>

   <svg height="73.34" width="210.81" x="189.18" y="273.94">
     <rect height="100%" width="100%"
       stroke='black' fill='purple'/>
     <use xlink:href="#DOG"/>
   </svg>
 </g>

 <defs>

  <symbol id="DOG">
   <defs>
    <g>
     <symbol id="letter_D" overflow="visible">
      <path d="M 131.5 -66.953125 C 131.5 -104.609375 106.203125 -136.09375 73.71875 -136.09375 L 10.359375 -136.09375 L 10.359375 -130.90625 C 24.109375 -130.90625 26.296875 -130.90625 26.296875 -121.9375 L 26.296875 -14.140625 C 26.296875 -5.1875 24.109375 -5.1875 10.359375 -5.1875 L 10.359375 0 L 73.71875 0 C 105.796875 0 131.5 -29.484375 131.5 -66.953125 Z M 116.765625 -66.953125 C 116.765625 -38.859375 108.59375 -27.5 104.8125 -22.109375 C 100.03125 -15.9375 88.671875 -5.1875 69.734375 -5.1875 L 47.421875 -5.1875 C 39.453125 -5.1875 39.046875 -6.171875 39.046875 -12.953125 L 39.046875 -123.140625 C 39.046875 -129.90625 39.453125 -130.90625 47.421875 -130.90625 L 69.734375 -130.90625 C 86.28125 -130.90625 116.765625 -121.140625 116.765625 -66.953125 Z " style="stroke:none;">
      </path>
     </symbol>
     <symbol id="letter_O" overflow="visible">
      <path d="M 134.09375 -67.75 C 134.09375 -108.59375 104.8125 -139.28125 71.734375 -139.28125 C 37.859375 -139.28125 9.171875 -108.1875 9.171875 -67.75 C 9.171875 -27.296875 38.25 3.1875 71.53125 3.1875 C 105.609375 3.1875 134.09375 -27.890625 134.09375 -67.75 Z M 118.953125 -70.328125 C 118.953125 -22.3125 93.640625 -0.40625 71.734375 -0.40625 C 49.015625 -0.40625 24.3125 -23.109375 24.3125 -70.328125 C 24.3125 -117.359375 51.40625 -135.6875 71.53125 -135.6875 C 92.65625 -135.6875 118.953125 -116.765625 118.953125 -70.328125 Z " style="stroke:none;">
      </path>
     </symbol>
     <symbol id="letter_G" overflow="visible">
      <path d="M 136.6875 -48.21875 L 136.6875 -53.40625 C 131.90625 -53 121.140625 -53 115.765625 -53 L 87.078125 -53.40625 L 87.078125 -48.21875 L 93.046875 -48.21875 C 110.1875 -48.21875 110.578125 -46.03125 110.578125 -38.859375 L 110.578125 -25.703125 C 110.578125 -3.78125 84.6875 -2 78.5 -2 C 57.984375 -2 24.3125 -16.140625 24.3125 -68.140625 C 24.3125 -120.140625 57.390625 -134.09375 76.71875 -134.09375 C 99.21875 -134.09375 115.5625 -114.5625 119.34375 -86.875 C 119.75 -84.484375 119.75 -84.078125 121.546875 -84.078125 C 123.734375 -84.078125 123.734375 -84.484375 123.734375 -88.0625 L 123.734375 -135.296875 C 123.734375 -138.875 123.53125 -139.078125 122.34375 -139.078125 C 121.546875 -139.078125 121.34375 -138.875 119.953125 -136.484375 L 111.1875 -119.75 C 101.421875 -132.109375 89.46875 -139.28125 74.125 -139.28125 C 40.046875 -139.28125 9.171875 -109.1875 9.171875 -68.140625 C 9.171875 -27.296875 39.453125 3.1875 74.515625 3.1875 C 90.65625 3.1875 106.40625 -2.59375 112.578125 -13.953125 C 115.96875 -5.78125 121.546875 -0.203125 122.53125 -0.203125 C 123.53125 -0.203125 123.734375 -0.40625 123.734375 -3.984375 L 123.734375 -39.65625 C 123.734375 -47.21875 124.328125 -48.21875 136.6875 -48.21875 Z " style="stroke:none;">
      </path>
     </symbol>
    </g>
   </defs>
   <g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
     <use x="-10.359" xlink:href="#letter_D" y="139.247"/>
     <use x="130.512871" xlink:href="#letter_O" y="139.247"/>
     <use x="273.975031" xlink:href="#letter_G" y="139.247"/>
   </g>
  </symbol>
 </defs>

</svg>
+3


source to share


2 answers


Use the scale in transform

the outer container <g>

.

transform="scale(x, y)"


With a little JavaScript, you can find dimensions relative to an arbitrary path:

var box = path.getBBox();
var eleWidth = box.width, eleHeight = box.height;
+6


source


You can also use in ViewBox

conjunction with preserveAspectRatio="none"

for a result, which in my opinion almost always gives me the desired result. This way, you don't have to do the calculations to indicate the transformation, but instead decide how large the canvas you draw, and then automatically scale it to the correct size ...

Example:

<svg style="width: 500px; height: 800px;" viewBox="0 0 610 1340" preserveAspectRatio="none">


You know that your drawing will be drawn in the dimensions of the viewBox, but the result must be placed in a 500x800 window with or without the format saved.

EDIT: I know you said "aspectless", but you still need to decide what you want to do. You can scale / stretch or clip. These parameters are specified in the preserveAspectRatio specifications.

+7


source






More articles:


All Articles