SVG viewBox无法调整尺寸：如何将SVG改为20px×20px？

别担心，这个问题其实很容易搞定！你的SVG已经有了正确的viewBox属性（0 0 35.41 35.61），这保证了它的比例不会变形，只需要给SVG元素加上明确的尺寸属性或者用CSS控制就行，下面是两种最常用的方法：

方法1：直接给SVG标签添加width和height属性 #

这是最直接的方式，修改你的SVG标签，加上width="20px"和height="20px"即可，浏览器会自动按照viewBox定义的比例缩放图形，不会出现拉伸变形。

修改后的完整代码示例：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>SVG</title>
</head>
<body>
  <h1>Testing SVG</h1>
  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.41 35.61" width="20px" height="20px">
    <defs>
      <style>.cls-1{fill:#000100;}</style>
    </defs>
    <title>B Tuerca BLACK</title>
    <!-- 保留你原有的SVG路径内容 -->
  </svg>
</body>
</html>

方法2：用CSS控制尺寸 #

如果需要批量调整或者动态修改尺寸，用CSS更灵活。你可以给SVG加一个类名，或者直接针对SVG元素设置样式：

#Layer_1 {
  width: 20px;
  height: 20px;
}

也可以把样式直接写在页面的<head>标签里：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>SVG</title>
  <style>
    #Layer_1 {
      width: 20px;
      height: 20px;
    }
  </style>
</head>
<body>
  <h1>Testing SVG</h1>
  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.41 35.61">
    <defs>
      <style>.cls-1{fill:#000100;}</style>
    </defs>
    <title>B Tuerca BLACK</title>
    <!-- 保留你原有的SVG路径内容 -->
  </svg>
</body>
</html>

小提示 #

viewBox的作用是定义SVG内部的坐标系统和原始比例，而width/height是控制它在页面上显示的实际大小。只要viewBox存在，设置宽高时就会自动按比例缩放，完全不用担心图形变形~

内容的提问来源于stack exchange，提问作者KevinM