反转svg折线

Posted 2023-03-25

【中文标题】反转svg折线

【英文标题】：Invert svg polyline

【发布时间】：2021-12-23 22:05:11

【问题描述】：

我尝试了几次，但我找不到将这个

的点

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

有人知道吗？谢谢

【参考方案1】：

只是transform 东西:)

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

【讨论】：

为什么如果我同时使用两者的高度不同？

【参考方案2】：

只需将 180d 更改为 scaleX(-1)。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案3】：

鉴于您正在使用的 viewBox，折线的等效水平翻转坐标为：

-2,1 17.7,10 -2,19

解释：

在水平方向上，您的 viewBox 范围从 x = 5 到 x = 18 (5+13)。 要水平翻转，您必须将 X 坐标从 viewBox 的一侧翻转到另一侧。 第一个和最后一个 X 坐标是 25。即超过 viewBox 右边缘的 7 (18)。所以要翻转它，我们需要从 viewBox 的 左边缘 中减去 7。这使得那些 -2。 中间 X 坐标为 5.3。即 viewBox (5) 左边缘内的 0.3。所以翻转版本需要在右边缘内为0.3。所以 18 - 0.3 变成 17.7。

所以25,1 5.3,10 25,19 变成了-2,1 17.7,10 -2,19。

<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="-2,1 17.7,10 -2,19"></polyline></svg></p>