如何在html中翻转svg路径？答案

【问题标题】：How to flip a svg path in html?如何在html中翻转svg路径？
【发布时间】：2021-03-27 04:54:02
【问题描述】：

我想使用bootstrap 的图标，但我需要垂直翻转：

https://icons.getbootstrap.com/icons/arrow-left-right/

我宁愿需要一个arrow-right-left，这样上面的箭头就指向右边。

我尝试使用transform="scale(-1 1) translate(-1260 0)" 进行转换，但没有成功：

https://jsfiddle.net/j63zpwqr/

那么我怎样才能在 Y 轴上翻转路径呢？

【问题讨论】：

SVG 上的 transform="scale(-1 1)" 应该这样做。
我当然也尝试过。但只要我添加任何转换，图标就消失了。

标签： html twitter-bootstrap svg path

【解决方案1】：

我将路径信息从 3 个路径更改为 1 个，因为 Bootstrap 图标臃肿，
使用https://yqnn.github.io/svg-path-editor/ 这也将 SVG 从绝对定位更改为相对

transform="scale(-1 1) 翻转图像

<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" fill="red" 
     class="bi bi-arrow-left-right" 
     viewBox="0 0 16 16" 
     transform="scale(-1 1)">
  <path d="m10.15 7.65a.5.5 0 01.71 0l3 3a.5.5 0 010 .71l-3 3a.5.5 0 01-.71-.71l2.65-2.65l-2.65-2.65a.5.5 0 010-.71zm-8.15 3.35a.5.5 0 01.5-.5h10.5a.5.5 0 010 1h-10.5a.5.5 0 01-.5-.5zm3.85-9.35a.5.5 0 010 .71l-2.65 2.65l2.65 2.65a.5.5 0 11-.71.71l-3-3a.5.5 0 010-.71l3-3a.5.5 0 01.71 0zm-3.35 3.35a.5.5 0 01.5-.5h10.5a.5.5 0 010 1h-10.5a.5.5 0 01-.5-.5z" />
</svg>

【讨论】：

在您的帮助下，我发现我将transform 语句添加到path，而不是svg。将它添加到正确的元素修复它。