如何在HTML页面中重新缩放SVG图像，而不是调整其可见部分的大小？

我试图使用

高度

和

宽度

属性将SVG调整为网页中的HTML，但是，当我尝试调整SVG的大小时，它只调整“父”SVG元素的大小，而内部内容的大小保持不变，我不确定为什么

SVG的原始大小是512像素，我需要它是128像素

改变宽度和高度似乎不会影响这一点

---

您可能需要向svg元素添加一个viewbox属性：

<svg height="128" width="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
  <path d="M385.999 74.604V36.629l-259.998-.002v37.975c0 59.979 28.879 116.799 78.581 153.279 8.971 6.585 14.33 16.997 14.33 28.125 0 11.106-5.326 21.518-14.281 28.087-50.767 37.242-78.633 94.554-78.633 153.304v37.976l259.998.002V437.4c0-58.66-27.788-116.003-78.636-153.307-8.953-6.568-14.275-16.979-14.275-28.083v-.001c0-11.131 5.362-21.543 14.335-28.129 49.59-36.401 78.579-93.165 78.579-153.276z" fill="#d8ecfe"/>
  <path d="M307.421 227.878c49.59-36.399 78.578-93.163 78.579-153.275V36.628l-259.998-.001 217.479.001v37.975c0 60.112-28.989 116.876-78.579 153.275-8.973 6.586-14.335 16.998-14.335 28.129v.001c0 11.104 5.323 21.515 14.275 28.083 50.849 37.304 78.637 94.647 78.636 153.307v37.975h42.52v-37.975c0-58.66-27.788-116.003-78.636-153.307-8.953-6.568-14.276-16.979-14.275-28.083v-.001c-.001-11.131 5.361-21.543 14.334-28.129z" fill="#c4e2ff"/>
  <path d="M155.999 444.851V439.8c0-25.113 12.988-48.88 36.137-67.931 18.029-14.838 40.671-22.653 63.861-22.653 23.19 0 45.832 7.816 63.862 22.654 23.15 19.053 36.138 42.819 36.138 67.931v5.051z" fill="#ffd15b"/>
  <path d="M119.001 36.627H393c9.941 0 18-8.199 18-18.313C411 8.2 402.941.001 393 .001H119.001c-9.942 0-18.001 8.2-18 18.315.001 10.113 8.059 18.311 18 18.311zM119.001 512H393c9.941 0 18-8.199 18-18.313 0-10.114-8.059-18.313-18-18.313H119.001c-9.942 0-18.001 8.2-18 18.315.001 10.113 8.059 18.311 18 18.311z" fill="#596c76"/>
  <path d="M255.998 330.173c-4.267 0-7.726-3.459-7.726-7.726v-10.302c0-4.268 3.459-7.726 7.726-7.726s7.726 3.459 7.726 7.726v10.302c0 4.267-3.459 7.726-7.726 7.726zm0-40.177c-4.267 0-7.726-3.459-7.726-7.726v-10.302c0-4.268 3.459-7.726 7.726-7.726s7.726 3.459 7.726 7.726v10.302c0 4.267-3.459 7.726-7.726 7.726zm0-40.177c-4.267 0-7.726-3.459-7.726-7.726v-10.302c0-4.268 3.459-7.726 7.726-7.726s7.726 3.459 7.726 7.726v10.302c0 4.267-3.459 7.726-7.726 7.726zM157.742 97.956c4.958 33.021 20.345 63.479 43.98 87.534 14.38 14.636 33.94 22.783 54.28 22.783s39.899-8.147 54.279-22.782c23.634-24.053 39.021-54.512 43.979-87.535z" fill="#feb137"/>
  <path d="M392.999 0h-52.564c9.941 0 18 8.199 18 18.313s-8.059 18.313-18 18.313h52.564c9.941 0 18-8.199 18-18.313S402.94 0 392.999 0zM392.999 475.373h-52.564c9.941 0 18 8.199 18 18.313 0 10.114-8.059 18.313-18 18.313h52.564c9.941 0 18-8.199 18-18.313 0-10.114-8.059-18.313-18-18.313z" fill="#465a61"/>
  <path d="M337.161 389.308c4.172 15.664 6.317 31.825 6.317 48.091v7.453h12.52V439.8c-.001-17.926-6.628-35.163-18.837-50.492z" fill="#ffc344"/>
  <path d="M342.001 97.957c-4.414 35.001-18.659 68.034-40.985 95.544 3.271-2.402 6.376-5.069 9.264-8.008 23.634-24.053 39.021-54.512 43.979-87.535h-12.258z" fill="#f6ab31"/>
</svg>

---

为了能够调整SVG的大小，您需要设置：

• 使用

  viewBox

  属性的真实尺寸
• 通过

  宽度

  和

  高度

  属性显示所需尺寸

因此：

---

转换属性也很有用。这是一个例子

这个答案是在

上给出的。如果尝试了这个方法，它仍然会“切断”图像，当检查元素时，

svg

元素的大小正确，但是内部路径不符合

svg

的大小

svg {
  width: 128px;
  height: 128px;
}

<svg height="256" width="256" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <!-- ... -->
</svg>

<svg id="test" height="500px" width="500px" xmlns="http://www.w3.org/2000/svg">
  <path d="M385.999 74.604V36.629l-259.998-.002v37.975c0 59.979 28.879 116.799 78.581 153.279 8.971 6.585 14.33 16.997 14.33 28.125 0 11.106-5.326 21.518-14.281 28.087-50.767 37.242-78.633 94.554-78.633 153.304v37.976l259.998.002V437.4c0-58.66-27.788-116.003-78.636-153.307-8.953-6.568-14.275-16.979-14.275-28.083v-.001c0-11.131 5.362-21.543 14.335-28.129 49.59-36.401 78.579-93.165 78.579-153.276z" fill="#d8ecfe"/>
  <path d="M307.421 227.878c49.59-36.399 78.578-93.163 78.579-153.275V36.628l-259.998-.001 217.479.001v37.975c0 60.112-28.989 116.876-78.579 153.275-8.973 6.586-14.335 16.998-14.335 28.129v.001c0 11.104 5.323 21.515 14.275 28.083 50.849 37.304 78.637 94.647 78.636 153.307v37.975h42.52v-37.975c0-58.66-27.788-116.003-78.636-153.307-8.953-6.568-14.276-16.979-14.275-28.083v-.001c-.001-11.131 5.361-21.543 14.334-28.129z" fill="#c4e2ff"/>
  <path d="M155.999 444.851V439.8c0-25.113 12.988-48.88 36.137-67.931 18.029-14.838 40.671-22.653 63.861-22.653 23.19 0 45.832 7.816 63.862 22.654 23.15 19.053 36.138 42.819 36.138 67.931v5.051z" fill="#ffd15b"/>
  <path d="M119.001 36.627H393c9.941 0 18-8.199 18-18.313C411 8.2 402.941.001 393 .001H119.001c-9.942 0-18.001 8.2-18 18.315.001 10.113 8.059 18.311 18 18.311zM119.001 512H393c9.941 0 18-8.199 18-18.313 0-10.114-8.059-18.313-18-18.313H119.001c-9.942 0-18.001 8.2-18 18.315.001 10.113 8.059 18.311 18 18.311z" fill="#596c76"/>
  <path d="M255.998 330.173c-4.267 0-7.726-3.459-7.726-7.726v-10.302c0-4.268 3.459-7.726 7.726-7.726s7.726 3.459 7.726 7.726v10.302c0 4.267-3.459 7.726-7.726 7.726zm0-40.177c-4.267 0-7.726-3.459-7.726-7.726v-10.302c0-4.268 3.459-7.726 7.726-7.726s7.726 3.459 7.726 7.726v10.302c0 4.267-3.459 7.726-7.726 7.726zm0-40.177c-4.267 0-7.726-3.459-7.726-7.726v-10.302c0-4.268 3.459-7.726 7.726-7.726s7.726 3.459 7.726 7.726v10.302c0 4.267-3.459 7.726-7.726 7.726zM157.742 97.956c4.958 33.021 20.345 63.479 43.98 87.534 14.38 14.636 33.94 22.783 54.28 22.783s39.899-8.147 54.279-22.782c23.634-24.053 39.021-54.512 43.979-87.535z" fill="#feb137"/>
  <path d="M392.999 0h-52.564c9.941 0 18 8.199 18 18.313s-8.059 18.313-18 18.313h52.564c9.941 0 18-8.199 18-18.313S402.94 0 392.999 0zM392.999 475.373h-52.564c9.941 0 18 8.199 18 18.313 0 10.114-8.059 18.313-18 18.313h52.564c9.941 0 18-8.199 18-18.313 0-10.114-8.059-18.313-18-18.313z" fill="#465a61"/>
  <path d="M337.161 389.308c4.172 15.664 6.317 31.825 6.317 48.091v7.453h12.52V439.8c-.001-17.926-6.628-35.163-18.837-50.492z" fill="#ffc344"/>
  <path d="M342.001 97.957c-4.414 35.001-18.659 68.034-40.985 95.544 3.271-2.402 6.376-5.069 9.264-8.008 23.634-24.053 39.021-54.512 43.979-87.535h-12.258z" fill="#f6ab31"/>
</svg>

svg#test{
   transform-origin: 100px 100px;
        transform: scale(0.5);
        -ms-transform: scale(0.5);
        -webkit-transform: scale(0.5);
}