Geek Answers Handbook

Scale all svg elements with CSS

my problem: I get a bunch of whole invvv lines from the database that look like this:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <g> <title>Layer 1</title> <path d="m213,174c-1,0 0.93744,4.0507 5,9c15.7598,19.19971 42.15933,40.96863 87,46c41.73807,4.68324 91.75034,-15.54512 112,-41c23.49255,-29.53134 36.13748,-73.41833 14,-96c-33.4342,-34.10505 -95.63815,-20.07648 -149,16c-43.49094,29.40303 -72.81625,61.12003 -83,114c-6.24055,32.40456 16.74812,59.13785 36,65c37.61407,11.45343 70.11282,-8.38123 85,-30c20.052,-29.11902 25.62744,-81.34587 2,-96c-56.33228,-34.93816 -148.52351,-14.6879 -180,-4c-15.29767,5.19435 -26.60644,10.5387 -28,13c-2.03145,3.58792 -1,7 -1,12l2,5l14,8" id="svg_3" stroke-width="5" stroke="#000000" fill="#7fff00"/> <path d="m316,134c-62,-30 -126.71272,-58.6663 -180,-88c-12.1703,-6.69953 -20.4588,-10.30656 -21,-9c-2.67879,6.46715 1.96343,18.00821 4,27c2.94713,13.01208 2.5971,18.59676 7,27c2.32053,4.42889 12.9695,11.11737 32,16c27.95625,7.1727 38,10 54,12c8,1 11.23318,-1.93299 14,-12c2.18535,-7.95136 3.35251,-14.97251 -1,-16c-9.73248,-2.29753 -34.42769,3.96417 -50,11c-15.49211,6.9996 -15,18 -7,31l16,9l34,13" id="svg_4" stroke-width="5" stroke="#000000" fill="#003f7f"/> <path d="m545,160c-75,-19 -106.09659,-19.87175 -136,-23c-28.13077,-2.94281 -43,-8 -46,-10c-3,-2 -3.87857,-4.49346 -7,-5c-4.93542,-0.80091 -12.43283,5.65108 -18,13c-4.35437,5.74799 -9.24832,11.08699 -8,20c2.01953,14.41948 20.07687,43.11597 50,62c18.21646,11.49612 52.68839,23.03511 90,11c43.91315,-14.16449 66.46838,-40.56108 73,-48c10.82147,-12.32462 9.97577,-16.90683 -7,-16c-28.12018,1.50214 -51.06433,9.53862 -67,25c-11.77127,11.42091 -15.13422,27.04025 -14,43c1.00253,14.10655 9.82635,27.17883 16,33c8.76114,8.26093 21.37579,13.85883 41,10c23.32312,-4.58618 33,-19 44,-37l3,-24l0,-18" id="svg_5" stroke-width="5" stroke="#000000" fill="#ffaaaa"/> <path d="m111,81c3,0 8,0 37,0c52,0 82,0 88,0c14,0 16.28644,-4.41257 15,-5c-12.76756,-5.83004 -40.52415,-1.81256 -62,20c-26.52142,26.93723 -37.75432,48.02293 -44,70c-5.52849,19.45343 -7.7567,47.00333 0,72c5.70076,18.37122 18.61078,39.07056 41,41c36.53882,3.14883 73.93094,-28.66966 113,-57c18.46078,-13.38655 35.46729,-29.39278 38,-45c1.44165,-8.88379 -9.32773,-23.96112 -27,-20c-29.78952,6.67712 -53.50916,36.86037 -80,70c-14.03154,17.55322 -18,27 -22,36l2,1l25,-11" id="svg_6" stroke-width="5" stroke="#000000" fill="#ff0000"/> <rect id="svg_7" height="156" width="234" y="96" x="291" stroke-width="5" stroke="#000000" fill="#3f007f"/> </g> </svg>

Now I want to add them all to the container using this template:

I want to resize the entire svg, and the content must scale proportionally to fit the container.

How can I do this using Javascript / JQuery or CSS?

Here is the html with the template I am using:

  <script type="text/template" id="previewGallerytmpl"> <% for (var i = 0; i < svgList.length; i++) { %> <% var svg = svgList[i]; var string = svg.svgString; console.log(string); %> <div class="content-to-scale"> <%= string %> <%= svg.sketchErsteller %> </div> <% } %> </script>

thanks;)

+4
source share
2 answers

Solved by adding:

 svg g { -webkit-transform: scale(0.5); }

to css file.

+2
source

There is a more cross-browser solution that will cause the browser to scale the SVG for you. However, this requires that your SVGs have a valid viewBox attribute. For instance:

 viewBox="0 0 640 480"

Then just use the CSS width and height for the SVG size. It even automatically scales and centers your SVG in the specified field.

You don’t say where your SVG files come from, so I don’t know if you can rely on files that have a viewBox. Your sample does not work, but if, for example, all your files were also generated using svg-edit, you can automatically add the viewBox when you saved them in db or pulled them out of it.

Anyway, the demo is here: http://jsfiddle.net/VddWR/

+7
source

More articles:


All Articles