如何切换SVG元素的XY轴，复用代码实现垂直/水平柱状图切换

方案1：SVG全局坐标变换（最省事，零修改原有垂直柱图代码） #

直接对需要切换为水平模式的SVG容器做旋转变换，所有内部rect元素不用做任何调整，切换横竖只需要增删一个类名即可：

svg { 
  height: 20px; 
  width: 100px;  
  border: 1px solid #ccc;
}
/* 水平模式仅需加这个类 */
svg.horizontal {
  /* 顺时针旋转90度后翻转Y轴，抵消旋转导致的内容倒置 */
  transform: rotate(90deg) scaleY(-1);
  transform-origin: top left;
  /* 如果需要保持容器尺寸不变，可额外添加宽高互换的逻辑 */
  width: 20px;
  height: 100px;
}
/* 若包含文字标注，额外添加这个规则抵消文字翻转 */
svg.horizontal text {
  transform: scaleY(-1);
}

SVG代码仅需保留一套垂直柱图的逻辑：

<!-- 垂直柱状图 -->
<svg class="vertical">
  <rect x="5%" y="60%" width="40%" height="40%" fill="black"/>
  <rect x="55%" y="40%" width="40%" height="60%" fill="black"/>
</svg>

<!-- 水平柱状图 完全复用上面的rect代码，仅改容器类名 -->
<svg class="horizontal">
  <rect x="5%" y="60%" width="40%" height="40%" fill="black"/>
  <rect x="55%" y="40%" width="40%" height="60%" fill="black"/>
</svg>

方案2：动态属性映射（适合需要自定义坐标轴、刻度的复杂场景） #

如果不想用整体旋转的方案，可以把柱图的坐标、尺寸参数统一管理，切换模式时批量替换属性值：

• 垂直模式下，x控制柱的水平位置，width控制柱间距，y控制柱底部位置，height控制柱的数值长度
• 水平模式下，y控制柱的垂直位置，height控制柱间距，x控制柱左侧位置，width控制柱的数值长度
  你可以用JS写一个简单的映射函数，输入垂直模式的参数，自动输出水平模式的对应属性，所有业务逻辑只需要写一次。

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