1 回答

TA貢獻1826條經驗 獲得超6個贊
自行在負水平方向上縮放會將組移動到其自己的視圖框之外: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>
- 1 回答
- 0 關注
- 190 瀏覽
添加回答
舉報