旋转 SVG

SVG 旋转与翻转

以 90° 为步长旋转 SVG,或做任一方向的镜像。整幅图只是被一个 transform 包住,文件里的每条路径都保持设计师留下的原样。

旋转 SVG

☞ 全程在你的浏览器中运行 —— 不会上传任何图片

将 SVG 拖放到此处

或点击浏览 —— 仅限 SVG

一行 transform

旋转 SVG 时到底发生了什么

旋转照片意味着对每一个像素重新采样。旋转 SVG 只意味着写下一个 transform:整幅图被包进一个绕画布转动的分组里,而画布本身 —— viewBox 与 width、height —— 在转 90° 或 270° 时把两条边互换。您路径里的坐标一个都没被改写。

这也是结果精确的原因。没有插值,没有软边,转四次也不会漂移 —— 四个 90° 转下来,拿回的是逐字节一致的原文件。

三步完成

如何旋转或翻转 SVG

01

拖入 SVG

选择一个 .svg 文件 —— 它始终留在您的设备上。

02

转向或镜像

以 90° 为步长旋转、任一轴翻转,两者也可叠加。

03

下载

还是那幅图,只是换了朝向。

快速解答

SVG 旋转与翻转常见问题

可以转任意角度吗?

这里不行。90° 步长时画布仍与图形严丝合缝;37° 就不行了,那需要留白、更大的 viewBox,还得对四个角怎么处理做主观取舍。90° 步长足以覆盖真实场景 —— 转个图标、修一张导出时躺倒的图 —— 而且结果完全可预测。

文件会变化很多吗?

几乎不会。只是加了一个带 transform 属性的分组元素,再更新 viewBox 和尺寸属性。路径、渐变、类名和 id 全都原样未动。

为什么旋转之后翻转的方向变了?

它没变 —— 它跟随的是您眼前所见。「水平」永远是在屏幕上左右镜像,而转过 90° 后,这在原文件里自然对应另一条轴。这正是大家在图像编辑器里期待的行为。

我的 SVG 里的 title 会怎样?

所有 title、desc、style、metadata 和 defs 都留在它们该在的顶层。只有图形本身被放进旋转的分组里,因此屏幕阅读器读出这张图的方式不变。

我的文件没有 viewBox

工具会按文件的 width 和 height 替您补一个。没有 viewBox 就没有可以互换两边的画布,转 90° 会把图形推到可见区域之外。

我的文件会被上传吗?

不会。文件的解析和重写都在您的浏览器里完成。