如何调整SVG的大小？ [英] How can I resize an SVG?

问题描述

我有这样的代码：

 < span> 
< svg height =32version =1.1width =32xmlns =http://www.w3.org/2000/svgstyle =overflow：hidden; position：relative; left：-0.0166626px; top：-0.983337px;> 
< desc>< / desc> 
< defs /> 
< path style =fill =＃333333stroke =noned =M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999 ............... 1,27.68,22.274Z/> 
< / svg>& nbsp; 
< / span> 
  

我删除了大部分内容并将其替换为......

目前会创建一个32乘32的图标。我想知道的是，我可以使用此代码创建100乘100图标吗？我试过改变宽度和高度，但没有什么区别。 SVG元素上的$ c>和 height 属性只定义绘图区域的大小。它们不会缩放内容以适合该区域。为此，您还需要使用 viewBox 属性，如下所示：

 < svg viewBox =0 0 32 32height =100width = 100......> 
  

viewBox属性建立用于SVG的所有子元素的坐标系。然后，您可以使用宽度和高度将此坐标系拉伸到所需的大小。

您可以使用 preserveAspectRatio 属性决定如何在纵横比不匹配的情况下进行缩放。

I have code like this:

  <span>
     <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
        <desc></desc>
        <defs/>
        <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
      </svg>&nbsp;
  </span>

I cut out most of the content and replaced it with ...

This presently creates a 32 by 32 icon. What I would like to know is can I use this code to create a 100 by 100 icon? I tried changing the width and height but it made no difference.

解决方案

The width and height attributes on the SVG element only define the size of the drawing area. They don't scale the contents to fit that area. For that, you need to also use the viewBox attribute, like so:

<svg viewBox="0 0 32 32" height="100" width="100" ...>

The viewBox attribute establishes the coordinate system that is used for all the child elements of the SVG. You can then use the width and height to stretch this coordinate system to the desired size.

You can use the preserveAspectRatio attribute to decide how to scale if the aspect ratios don't match.

这篇关于如何调整SVG的大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！