使用CSS缩放所有svg元素

Question

my problem is I receive a bunch of whole inline svg strings from a 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 a container using this template:

I want to change the whole size of the svg and the content should be scaled proportionally so it will fit the container.

How can I do this by either Javascript/ JQuery or CSS?

Here is the html with the template i use:

 <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 ;)

Answer 1

There is a more cross-browser solution that will result in the browser scaling the SVG for you. However it requires that your SVGs have a valid viewBox attribute. For example:

viewBox="0 0 640 480"

Then just use CSS width and height to size the SVG. It will even automatically scale and centre your SVGs in the specified box.

You don't say where your SVG files come from, so I don't know whether you can rely on the files having a viewBox. Your sample doesn't, but if for example, all your files were likewise generated by svg-edit, you could automatically add the viewBox as you saved them to the db or pulled them from it.

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

Answer 2

Solved by adding:

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

to the css file.