如何旋转SVG路径不被裁剪且不增大<svg>容器宽高？

之前操作失效的原因 #

• 给内层嵌套<svg>标签加transform无效果：SVG 1.1规范中嵌套<svg>元素默认不支持transform属性，该属性是SVG 2新增的特性，兼容性极差，多数渲染环境下不会生效。
• 直接给path加旋转被裁剪：你的内层SVG视口尺寸为100px宽、40px高，路径旋转90度后原横向图形变为纵向，超出视口边界就会被默认裁切。

可行实现方案 #

不需要修改内外层SVG容器的尺寸，有两种稳定可落地的实现方式：

方案1：直接换算路径坐标实现等效旋转 #

提前把旋转后的坐标换算好，直接写入path的d属性，渲染时无额外变换，完全不会出现裁剪。针对你示例中的交叉线路径，90度旋转的实现代码如下：

<svg width="600" height="600" viewBox="0 0 600 600">
  <!-- 内层SVG尺寸保持原有的100*40不变 -->
  <svg x="10" y="10" height="40" width="100" viewBox="0 0 100 40">
    <path d="M50 -30 L50 70 M10 20 L90 20" />
  </svg>
</svg>

方案2：旋转变换后追加平移偏移补正 #

如果需要保留transform写法，可以在旋转规则后追加平移属性，把旋转后溢出视口的路径移回可视范围内。推荐使用三参数的rotate写法直接指定旋转中心，兼容性远好于transform-origin写法，示例代码如下：

<svg width="600" height="600" viewBox="0 0 600 600">
  <svg x="10" y="10" height="40" width="100" viewBox="0 0 100 40">
    <!-- 旋转中心设为内层SVG中心点(50,20)，旋转后平移补正偏移 -->
    <path d="M0 0 L100 40 M0 40 L100 0" transform="rotate(90, 50, 20) translate(30, -30)" />
  </svg>
</svg>

平移的数值根据旋转角度、视口宽高差计算即可，上述示例中100宽与40高的差值为60，半值即为30，对应平移量即可刚好把旋转后的路径移回视口中心。

注意：不要尝试通过给外层嵌套其他标签包裹实现旋转，只要内层SVG视口尺寸不变，超出视口的内容依然会被裁剪。

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