亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何水平翻轉 SVG?

如何水平翻轉 SVG?

慕婉清6462132 2023-10-10 18:06:24
我正在嘗試水平翻轉以下 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謝謝!
查看完整描述

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>


查看完整回答
反對 回復 2023-10-10
  • 1 回答
  • 0 關注
  • 190 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號