从中心缩放 SVG答案

【问题标题】：Scale SVG from center从中心缩放 SVG
【发布时间】：2017-06-08 07:29:46
【问题描述】：

我在 css 中有一个 svg 作为背景图像，我想翻转它。 (scale(-1, 1))

当我尝试正常变换时，它不会绕中心，看起来很奇怪。

有没有办法在不使用 JS 的情况下围绕中心翻转整个 SVG？

这是一个使用 HTML 而非 CSS 背景图像的演示： https://codepen.io/anon/pen/bRVqwz

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'/></svg><br />
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' transform="scale(-1, 1)"/></svg>


svg {
  width: 50px;
  height: 50px;
}

【问题讨论】：

标题具有误导性。您正在寻找的是变换旋转。添加了答案

标签： css svg

【解决方案1】：

首先，要了解如何翻转 SVG，您需要了解 viewBox 的工作原理（根据 Mozilla MDN）：

viewBox 属性的值是一个由 min-x、min-y、width 和 height 四个数字组成的列表，由空格和/或逗号分隔，它们指定了用户空间中应该映射到边界的矩形由给定元素建立的视口，考虑到属性 preserveAspectRatio。

所以，如果你想翻转你的 svg，首先你需要transform: scaleX(-1)。然后，您需要将您的[width] 的负数传递给[min-x]。

例如：

原始 SVG：viewBox='0 0 12 20'

翻转的 SVG：viewBox='-12 0 12 20'

【讨论】：

【解决方案2】：

您可以尝试使用 x 和 y 进行变换旋转 transform="rotate(180 5 10)"

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' transform="rotate(180 5 10)"/></svg>

文档 https://www.w3.org/TR/SVG/coords.html#TransformAttribute

【讨论】：