html - 如何在html中翻转svg路径?
问题描述
我想使用 中的图标bootstrap
,但我需要它垂直翻转:
https://icons.getbootstrap.com/icons/arrow-left-right/
我宁愿需要一个arrow-right-left,以便上箭头指向右侧。
我尝试使用 进行转换transform="scale(-1 1) translate(-1260 0)"
,但这不起作用:
https://jsfiddle.net/j63zpwqr/
那么如何在 Y 轴上翻转路径呢?
解决方案
我将路径信息从 3 条路径更改为 1 条,因为 Bootstrap 图标臃肿,
使用https://yqnn.github.io/svg-path-editor/
这也将 SVG 从绝对定位更改为相对
atransform="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>
推荐阅读
- javascript - 在创建时访问对象内容
- python - tf.data.Dataset 与步进批次
- database - 数据库最佳设计(混淆了 2 个设计概念)
- django - 为什么我无法使用客户端登录到管理员?
- python - 用迭代循环减去2个数据帧并获得最小值
- python-3.x - 如何禁用 ipython 恼人的错误信息
- image - Flutter:调用 Image.memory 时无法实例化图像编解码器
- c# - 从 PDF 文件中提取值到变量
- javascript - 触发键盘事件时,mousemove 不会触发每一帧
- mysql - 如何在 SQL 查询中获取匹配的左连接项的总数