如何调整SVG圆角矩形尺寸且保持rx/ry属性不变？

这个问题我之前也碰到过！SVG的transform="scale()"确实会把所有属性包括圆角（rx/ry）一起缩放，完全不是我们想要的效果。不过有两个靠谱的方法可以解决，不用手动修改rx/ry属性：

方法1：纯SVG层面用嵌套SVG+viewBox实现 #

这种方式不需要任何JS，仅通过SVG的原生特性就能实现“尺寸放大但圆角不变”的效果。核心思路是把圆角矩形放在一个内部<svg>容器里，通过调整外部容器的宽高，同时用viewBox映射原始坐标，这样内部矩形的rx/ry不会被缩放：

<svg xmlns="http://www.w3.org/2000/svg" >
  <!-- 原始矩形 -->
  <rect x="10" y="0" rx="10" ry="10" height="50" width="50" fill="#4CAF50"/>
  
  <!-- 用嵌套SVG实现"缩放"效果（保持圆角大小不变） -->
  <svg x="10" y="50" width="100" height="100" viewBox="0 0 50 50">
    <rect x="0" y="0" rx="10" ry="10" height="100%" width="100%" fill="#2196F3"/>
  </svg>
  
  <!-- 目标效果（对比用） -->
  <rect x="10" y="250" rx="10" ry="10" height="100" width="100" fill="#FF9800"/>
</svg>

原理说明：

• 内部<svg>的viewBox="0 0 50 50"定义了内部的坐标系统和原始矩形尺寸一致
• 外部<svg>的width="100"和height="100"是我们想要的最终尺寸
• 内部矩形用width="100%"和height="100%"占满容器，rx/ry保持原始的10，最终显示的圆角大小和目标效果完全一致

方法2：在JointJS中自定义Resize逻辑 #

如果是在JointJS场景下，我们可以绕过默认的scale()变换，直接修改元素的宽高属性，这样rx/ry不会被改动。你可以覆盖元素的resize事件回调，直接更新size属性：

// 假设你已经创建了一个圆角矩形元素
const rectElement = new joint.shapes.standard.Rectangle({
  position: { x: 10, y: 50 },
  size: { width: 50, height: 50 },
  attrs: {
    body: {
      rx: 10,
      ry: 10,
      fill: '#2196F3'
    }
  }
});

// 自定义resize行为，直接修改宽高而非用scale变换
rectElement.on('resize', function(element, options) {
  // 直接设置新的宽高
  element.set('size', { 
    width: options.width, 
    height: options.height 
  });
  // 清除自动添加的scale变换
  element.set('transform', '');
});

rectElement.addTo(graph);

这样当你用JointJS的resize工具调整元素时，会直接修改矩形的宽高，而不是应用缩放变换，圆角大小自然保持不变。

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