使用CSS缩放所有svg元素

针头

我的问题是我从数据库收到一堆完整的内联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>

谢谢 ;)

针头

通过添加解决:

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

到css文件。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用CSS使内联SVG缩放为父元素

来自分类Dev

CSS使用flexbox缩放svg

来自分类Dev

使用jQuery获取所有元素CSS

来自分类Dev

CSS:对*所有元素使用否定

来自分类Dev

jQuery panzoom缩放所有元素

来自分类Dev

使用 css 动画从中心缩放 svg

来自分类Dev

缩放SVG元素

来自分类Dev

使用带有CSS模块的ReactJS样式化SVG元素

来自分类Dev

CSS:缩放HTML5画布以使用所有父div空间

来自分类Dev

如何使用Chrome的inspect元素从网站复制所有CSS。

来自分类Dev

使用CSS选择所有块级元素

来自分类Dev

使用CSS类更改所有元素的颜色

来自分类Dev

使用 Javascript 动态添加时,SVG 元素无法正确缩放

来自分类Dev

单击行的所有元素后,TableRow重新缩放

来自分类Dev

可以使用:checked CSS设置所有属性的所有元素吗?

来自分类Dev

使用CSS,画布或SVG创建流体(缩放)同心圆弧

来自分类Dev

使用Inkscape缩放SVG

来自分类Dev

带有CSS元素的HTML5在缩放时移动

来自分类Dev

如何使用d3.js在SVG中选择所有类型的子元素

来自分类Dev

使用SVG元素的所有类制作一个数组

来自分类Dev

如何使用d3.js在SVG中选择所有类型的子元素

来自分类Dev

使用CSS3选择除第一个元素外的所有元素

来自分类Dev

在CSS中重新缩放SVG

来自分类Dev

CSS3缩放不能在所有方向上缩放

来自分类Dev

从JS更改所有元素的CSS

来自分类Dev

根据 IF 条件更改所有元素的 css

来自分类Dev

如何使用Javascript更改具有共同标识符的所有元素的CSS?

来自分类Dev

如何使用Javascript更改具有共同标识符的所有元素的CSS?

来自分类Dev

确定某个坐标上的所有SVG元素(mouseclick)

Related 相关文章

热门标签

归档