javascript - CSS を使用してすべての svg 要素をスケーリングする

Question

私の問題は、次のようなデータベースから一連のインライン svg 文字列を受け取ることです。

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

次に、このテンプレートを使用して、それらすべてをコンテナーに追加します。

svg の全体のサイズを変更したいのですが、コンテナに収まるようにコンテンツを比例してスケーリングする必要があります。

Javascript / JQueryまたはCSSのいずれかでこれを行うにはどうすればよいですか?

これが私が使用するテンプレートを含むhtmlです：

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

ありがとう ;）

Answer 1

以下を追加して解決:

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

cssファイルに.