是否可以使用CSS缩放内嵌SVG？ [英] Is is possible to scale inline SVG with CSS?

问题描述

我想使用CSS样式来控制SVG设计的大小。例如...

  .svg {width：100％; }当我从一个文件嵌入SVG图像时，它像任何其他图像一样工作正常：
 



<

 < img src =image.svgclass =svg/> 
  

但是当我使用内联SVG时，它不工作：

 < svg class =svg> ...< / svg> 
  

svg框将增长，但内容保持不变。

有办法吗？

解决方案

使用仅使用 viewBox 属性。这将使得svg标记的内容自动占据svg标记本身的定义的宽度和高度，只显示定义的边界内的内容。例如：

 < svg width =82height =82viewbox =0 0 102 102> 
< rect x =1y =1width =100height =100stroke =blackstroke-width =2fill =white/> 
< text fill =blackx =10y =30> FooBarBaz< / text> 
< / svg>或者，您可以应用svg  transform  
 
 < svg width =82height =82 > 
< g transform =scale（0.8）> 
< rect x =1y =1width =100height =100stroke =blackstroke-width =2fill =white/> 
< text fill =blackx =10y =30> FooBarBaz< / text> 
< / g> 
< / svg>最后，您可以尝试使用CSS3  transform  
  
 
 $ b <缩放整个svg元素。这是最不支持的方法，但我提到它，无论如何，因为你最初要求一个CSS解决方案。我强烈建议使用上述解决方案之一，如果可能的话。
 < svg width =102height =102style =transform：scale（0.8）; -webkit-transform：scale（0.8）; -moz- transform：scale （0.8）; 
< rect x =1y =1width =100height =100stroke =blackstroke-width =2fill =white/> 
< text fill =blackx =10y =30> FooBarBaz< / text> 
< / svg> 
  
 
I want to use CSS styles to control the size of SVG designs. For example...
.svg { width:100%; }
When I embed an SVG image from a file it acts just like any other image and works fine:
<img src="image.svg" class="svg" />
But when I use inline SVG it DOESN't work:
<svg class="svg">...</svg>
The svg "box" will grow, but the contents stay the same.

Is there a way to do this?
解决方案
The first and probably best method you could use is just using the viewBox attribute. That will make the contents of the svg tag automatically take up the defined width and height of the svg tag itself, by only showing what's within the defined boundaries. For example:
<svg width="82" height="82" viewbox="0 0 102 102">
    <rect x="1" y="1" width="100" height="100" stroke="black" stroke-width="2" fill="white"/>
    <text fill="black" x="10" y="30">FooBarBaz</text>
</svg>
Alternatively, you could apply a svg transform to the contents of the SVG tag, which would look like this:
<svg width="82" height="82">
    <g transform="scale(0.8)">
        <rect x="1" y="1" width="100" height="100" stroke="black" stroke-width="2" fill="white"/>
        <text fill="black" x="10" y="30">FooBarBaz</text>
    </g>
</svg>
Finally, you can try using CSS3 transform to scale the whole svg element. This is the least supported method, but I mention it anyway because you originally asked for a CSS solution. I strongly suggest using one of the above solutions though, if that's possible at all.
<svg width="102" height="102" style="transform:scale(0.8); -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -ms-transform:scale(0.8); -o-transform:scale(0.8);">
    <rect x="1" y="1" width="100" height="100" stroke="black" stroke-width="2" fill="white"/>
    <text fill="black" x="10" y="30">FooBarBaz</text>
</svg>


                        
这篇关于是否可以使用CSS缩放内嵌SVG？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！