反转svg折线答案

【问题标题】：Invert svg polyline反转svg折线
【发布时间】：2021-12-23 22:05:11
【问题描述】：

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

的点

<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>

有人知道吗？谢谢

【问题讨论】：

标签： css svg polyline viewbox

【解决方案1】：

只是transform 东西:)

<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>

【讨论】：

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

【解决方案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。

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

【讨论】：