You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何无需修改坐标将SVG缩放至目标尺寸(如64x64)?

问题描述

我有一批已生成的SVG文件,示例如下:

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <defs>
    <style>
      .cls-1 {
        stroke-width: 16.47px;
      }

      .cls-1, .cls-2, .cls-3 {
        stroke: #000;
      }

      .cls-1, .cls-3 {
        fill: none;
        stroke-miterlimit: 10;
      }

      .cls-3 {
        stroke-width: 17.22px;
      }
    </style>
  </defs>
  <g id="Language">
    <path class="cls-1" d="M781.99,501.31c0,42.92-10.55,83.37-29.19,118.92-113.37-1.05-82.18-8.47-86.73,95.59-220.62,146.51-495.29-110.02-363.9-340.23,104.74.86,79.99,8.88,83.02-88.78,161.56-112.49,402.81,15.29,396.81,214.51Z"/>
    <path class="cls-3" d="M624.99,501.31c-2.17,337.07-196.55,337.06-198.72,0,2.17-337.07,196.55-337.05,198.72,0Z"/>
    <path class="cls-3" d="M525.63,401.95c337.07,2.17,337.06,196.55,0,198.72-337.07-2.17-337.05-196.55,0-198.72Z"/>
    <path class="cls-3" d="M385.18,255.35c-6.14,132.62,31.76,120.84-90.02,120.23l-50.86,37.07-.57-37.07c-14.2.21-33.47,2.51-34.4-17.22,0,0,0-103.01,0-103.01,0-9.47,7.75-17.22,17.22-17.22h141.41c9.47,0,17.22,7.75,17.22,17.22Z"/>
    <path class="cls-3" d="M669.44,638.05c6.14,132.62-31.76,120.84,90.02,120.23l50.86,37.07.57-37.07c14.2.21,33.47,2.51,34.4-17.22,0,0,0-103.01,0-103.01,0-9.47-7.75-17.22-17.22-17.22h-141.41c-9.47,0-17.22,7.75-17.22,17.22Z"/>
    <path class="cls-2" d="M326.54,336.24c.4,1.21.66,2.17.76,2.88.1.71-.03,1.24-.4,1.59-.37.35-1.03.57-1.97.66-.94.08-2.24.13-3.88.13s-3.05-.03-4.01-.08c-.96-.05-1.69-.15-2.19-.3-.5-.15-.86-.36-1.06-.63-.2-.27-.37-.62-.5-1.06l-4.39-13.12h-24.52l-4.14,12.76c-.13.47-.31.87-.53,1.19-.22.32-.57.57-1.06.76s-1.18.31-2.07.38c-.89.07-2.06.1-3.51.1-1.55,0-2.76-.05-3.63-.15-.88-.1-1.48-.34-1.82-.73-.34-.39-.45-.93-.35-1.64s.35-1.65.76-2.83l20.13-57.91c.2-.57.44-1.03.71-1.39s.7-.62,1.29-.81c.59-.18,1.4-.3,2.45-.35,1.04-.05,2.42-.08,4.14-.08,1.98,0,3.56.03,4.74.08,1.18.05,2.09.17,2.75.35.66.19,1.13.46,1.41.83.29.37.53.88.73,1.51l20.18,57.86ZM296.58,288.37h-.05l-9.23,27.74h18.51l-9.23-27.74Z"/>
    <path class="cls-2" d="M777.64,708.42c.66.95,1.1,1.77,1.34,2.46.24.69.36,1.49.36,2.4v2.57c0,1.6-.16,2.75-.46,3.44-.31.69-.92,1.04-1.83,1.04h-44.16c-.69,0-1.18-.44-1.48-1.31-.29-.87-.44-2.28-.44-4.21,0-2.04.15-3.52.46-4.45.31-.93.79-1.39,1.45-1.39h28.2l-30-41.86c-.77-1.13-1.15-2.04-1.15-2.73,0-.84.58-1.45,1.75-1.83,1.17-.38,3.02-.57,5.57-.57,3.02,0,5.15.16,6.37.46s2.12.9,2.71,1.78l14.75,21.42.98-1.04c1.17-1.24,2.05-2.41,2.65-3.52.6-1.11,1.02-2.35,1.26-3.72.24-1.37.36-3.11.36-5.22v-7.92c0-.8.54-1.37,1.61-1.72,1.07-.35,2.91-.52,5.49-.52s4.36.17,5.44.52c1.07.35,1.61.92,1.61,1.72v7.38c0,3.9-.26,6.99-.79,9.26-.53,2.28-1.45,4.46-2.76,6.56-1.31,2.1-3.35,4.56-6.12,7.41l-1.64,1.75,8.47,11.86Z"/>
  </g>
</svg>

希望将这类SVG缩放至目标尺寸(如64x64),请问能否无需修改所有坐标,通过添加属性实现该需求?


解决方案

完全可以不用修改路径坐标,通过添加或调整SVG属性快速实现缩放,以下是两种常用方法:

方法一:直接设置width和height属性

利用SVG的viewBox特性(你的示例中已包含viewBox="0 0 1000 1000"),直接在<svg>标签上添加目标尺寸的width和height属性即可,浏览器会自动按比例将整个图形缩放到指定大小。

修改后的示例代码:

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="64" height="64">
  <!-- 原SVG内容完全保留,无需修改路径坐标 -->
</svg>

这种方法简单快捷,stroke-width会自动按比例缩放,适合大多数常规场景。

方法二:使用transform: scale()精细控制

如果需要更灵活的缩放控制(比如调整缩放原点、单独控制横纵缩放比例),可以给最外层的<g>元素添加transform="scale(比例值)"属性,比例值为目标尺寸除以原viewBox尺寸,这里就是64/1000=0.064。

注意:使用scale时,stroke-width也会被缩放,若希望线条视觉宽度不变,可以将CSS中的stroke-width改为相对单位(比如百分比):

修改后的示例代码:

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <defs>
    <style>
      .cls-1 {
        stroke-width: 1.647%; /* 原16.47px转换为百分比:16.47/1000*100% */
      }

      .cls-1, .cls-2, .cls-3 {
        stroke: #000;
      }

      .cls-1, .cls-3 {
        fill: none;
        stroke-miterlimit: 10;
      }

      .cls-3 {
        stroke-width: 1.722%; /* 原17.22px转换为百分比 */
      }
    </style>
  </defs>
  <g id="Language" transform="scale(0.064)">
    <!-- 原路径内容完全保留 -->
  </g>
</svg>

内容的提问来源于stack exchange,提问作者SPlatten

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.11 17:45:54