旋转 SVG
☞ 全程在你的浏览器中运行 —— 不会上传任何图片将 SVG 拖放到此处
或点击浏览 —— 仅限 SVG
预览
旋转 SVG
以 90° 为步长旋转 SVG,或做任一方向的镜像。整幅图只是被一个 transform 包住,文件里的每条路径都保持设计师留下的原样。
或点击浏览 —— 仅限 SVG
预览
一行 transform
旋转照片意味着对每一个像素重新采样。旋转 SVG 只意味着写下一个 transform:整幅图被包进一个绕画布转动的分组里,而画布本身 —— viewBox 与 width、height —— 在转 90° 或 270° 时把两条边互换。您路径里的坐标一个都没被改写。
这也是结果精确的原因。没有插值,没有软边,转四次也不会漂移 —— 四个 90° 转下来,拿回的是逐字节一致的原文件。
三步完成
选择一个 .svg 文件 —— 它始终留在您的设备上。
以 90° 为步长旋转、任一轴翻转,两者也可叠加。
还是那幅图,只是换了朝向。
快速解答
这里不行。90° 步长时画布仍与图形严丝合缝;37° 就不行了,那需要留白、更大的 viewBox,还得对四个角怎么处理做主观取舍。90° 步长足以覆盖真实场景 —— 转个图标、修一张导出时躺倒的图 —— 而且结果完全可预测。
几乎不会。只是加了一个带 transform 属性的分组元素,再更新 viewBox 和尺寸属性。路径、渐变、类名和 id 全都原样未动。
它没变 —— 它跟随的是您眼前所见。「水平」永远是在屏幕上左右镜像,而转过 90° 后,这在原文件里自然对应另一条轴。这正是大家在图像编辑器里期待的行为。
所有 title、desc、style、metadata 和 defs 都留在它们该在的顶层。只有图形本身被放进旋转的分组里,因此屏幕阅读器读出这张图的方式不变。
工具会按文件的 width 和 height 替您补一个。没有 viewBox 就没有可以互换两边的画布,转 90° 会把图形推到可见区域之外。
不会。文件的解析和重写都在您的浏览器里完成。