Question

我在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;
}

Answer 1

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

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

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

例如：

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

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

Answer 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://github.com/bruli/php-git-hooks/blob/528a9a4c5905e9f5ca7bdb55f5111dd4fe22ca9c/src/PhpGitHooks/Module/Configuration/Domain/PhpCsStandard.php#L22

从中心缩放SVG

2 个答案: