Question

我有这样的代码：

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

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

目前这会创建一个32 x 32的图标。我想知道的是我可以使用此代码创建一个100乘100的图标吗？我尝试改变宽度和高度，但没有区别。

Answer 1

SVG元素上的width和height属性仅定义绘图区域的大小。它们不会缩放内容以适合该区域。为此，您还需要使用viewBox属性，如下所示：

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

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

如果宽高比不匹配，您可以使用preserveAspectRatio属性来决定如何缩放。

Answer 2

它通过修改 svg 样式对我有用

let svgDom = document.getElementsByTagName("svg")[0];
let newWidth=100,newHeight=90;
svgDom.style.width = newWidth+'px';
svgDom.style.height = newHeight+'px';

如何调整SVG的大小？

2 个答案: