如何水平翻转SVG？

Question

我想要水平翻转以下SVG：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36.1 25.8" enable-background="new 0 0 36.1 25.8" xml:space="preserve">
    <g>
        <line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="0" y1="12.9" x2="34" y2="12.9"></line>
        <polyline fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" points="22.2,1.1 34,12.9 22.2,24.7   "></polyline>
    </g>
</svg>

我尝试了transform="scale(1, -1) translate(0, -100)"和其他变化方式，但它只是删除了向量。我在这里还有一个CodePen：https://codepen.io/bick/pen/eYNQaqX 谢谢！

- bick

---

你试过使用 rotate(90deg); 吗？ - Biplove Lamichhane

@BiploveLamichhane 是的，那也不起作用。 - bick

使用CSS样式属性，您还可以更改方向<svg style="transform: rotate(180deg);>。 - Guruling Kumbhar

这是您要找的吗？https://jsfiddle.net/cancerian73/4069Lsna/ - San

Answer 1

在负水平方向上进行缩放会将组移动到其自身视口之外：transform="scale(-1 1)"

因此，您需要同时将组转换回负水平方向：transform="scale(-1 1) translate(-36.1 0)"

body {
  background: #000;
}

<svg viewBox="0 0 36.1 25.8">
  <g transform="scale(-1 1) translate(-36.1,0)">
    <line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="0" y1="12.9" x2="34" y2="12.9"></line>
    <polyline fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" points="22.2,1.1 34,12.9 22.2,24.7"></polyline>
  </g>
</svg>

使用CSS也可以实现这一点，使用transform-origin属性。

body {
  background: #000;
}

.arrow {
  transform: scale(-1, 1);
  transform-origin: center;
}

<svg viewBox="0 0 36.1 25.8">
  <g class="arrow">
    <line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="0" y1="12.9" x2="34" y2="12.9"></line>
    <polyline fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" points="22.2,1.1 34,12.9 22.2,24.7"></polyline>
  </g>
</svg>

- ksav