如何水平翻转 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

谢谢！

Answer 1

自行在负水平方向上缩放会将组移动到其自己的视图框之外：transform="scale(-1 1)"因此，您需要同时将组平移回负水平方向：transform="scale(-1 1) translate(-36.1 0)"body {&nbsp; background: #000;}<svg viewBox="0 0 36.1 25.8">&nbsp; <g transform="scale(-1 1) translate(-36.1,0)">&nbsp; &nbsp; <line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="0" y1="12.9" x2="34" y2="12.9"></line>&nbsp; &nbsp; <polyline fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" points="22.2,1.1 34,12.9 22.2,24.7"></polyline>&nbsp; </g></svg>这也可以通过 CSS 使用transform-origin.body {&nbsp; background: #000;}.arrow {&nbsp; transform: scale(-1, 1);&nbsp; transform-origin: center;}<svg viewBox="0 0 36.1 25.8">&nbsp; <g class="arrow">&nbsp; &nbsp; <line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="0" y1="12.9" x2="34" y2="12.9"></line>&nbsp; &nbsp; <polyline fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" points="22.2,1.1 34,12.9 22.2,24.7"></polyline>&nbsp; </g></svg>