I tried several times but i cant find the points to invert this < to >

<p style="text-align: right;"><svg class="uk-visible@m" width="50" height="100" viewbox="5 5 13 13" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" stroke="#ff6633" stroke-width="1.6" points="25,1 5.3,10 25,19"></polyline></svg></p>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Any knows? Thanks

CodePudding user response：

Just transform thing :)

<p style="text-align: right;">
  <svg 
    class="uk-visible@m" 
    style="transform: rotate(180deg);" 
    width="50" 
    height="100" 
    viewbox="5 5 13 13" 
    xmlns="http://www.w3.org/2000/svg"
  >
    <polyline 
      fill="none" 
      stroke="#ff6633" 
      stroke-width="1.6" 
      points="25,1 5.3,10 25,19"
    ></polyline>
  </svg>
</p>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Just change 180d to scaleX(-1).

CodePudding user response：

Need same height, now it doesnt fit. How can i do it?

  <svg 
    class="uk-visible@m" 
    style="transform: rotate(180deg);" 
    width="50" 
    height="100" 
    viewbox="5 5 13 13" 
    xmlns="http://www.w3.org/2000/svg"
  >
    <polyline 
      fill="none" 
      stroke="#ff6633" 
      stroke-width="1.6" 
      points="25,1 5.3,10 25,19"
    ></polyline>
  </svg>
  <svg 
    class="uk-visible@m" 
    width="50" 
    height="100" 
    viewbox="5 5 13 13" 
    xmlns="http://www.w3.org/2000/svg"
  >
    <polyline 
      fill="none" 
      stroke="#ff6633" 
      stroke-width="1.6" 
      points="25,1 5.3,10 25,19"
    ></polyline>
  </svg>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>