秤所有SVG元素与CSS

我的问题是我收到一束从一个数据库，像这样整联SVG字符串：秤所有SVG元素与CSS

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

感谢;）

来源

2013-09-25 Igle

解决加入：

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

CSS文件。

来源

2013-09-25 18:39:58 Igle

的新方法，但使用'viewBox'通过@BigBadaboom的建议是解决你的需求的正确方法。 – Phrogz

目前，即使“-webkit”前缀被删除，这也不太可能跨浏览器。所有浏览器尚未支持CSS未使用的CSS元素（读取：

还有一个更加跨浏览器的解决方案，它将导致浏览器为您缩放SVG。但是，它要求您的SVG具有有效的viewBox属性。例如：

viewBox="0 0 640 480"

然后，只需使用CSS宽度和高度来设置SVG大小。它甚至会自动缩放SVG并将其放置在指定的框中。

你不说你的SVG文件来自哪里，所以我不知道你是否可以依赖具有viewBox的文件。你的示例没有，但是如果你的所有文件同样是由svg-edit生成的，你可以自动添加viewBox，当你将它们保存到数据库中或者将它们从中拉出来。

无论如何，这里演示：http://jsfiddle.net/VddWR/

来源

2013-09-25 23:51:06

秤所有SVG元素与CSS

回答

相关问题