将实际 svg 路径旋转 90 度？答案

【问题标题】：Rotate actual svg path 90 degrees?将实际 svg 路径旋转 90 度？
【发布时间】：2019-05-07 00:29:18
【问题描述】：

我想将这条路径旋转 90 度。不只是旋转整个元素，我想更改实际路径以获得向上箭头和向下箭头。是否有路径转换工具或其他简单的方法来做到这一点？

<svg xmlns="http://www.w3.org/2000/svg">
    <path d="M8.578 16.359l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path>
</svg>

我实际上找到了一个 svg 库，它具有我正在寻找的确切形状（见下文）。如果有人能告诉我我自己是如何达到这个结果的，那就太好了。谢谢！

<svg xmlns="http://www.w3.org/2000/svg">
    <path d="M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z"></path>
</svg>

<svg xmlns="http://www.w3.org/2000/svg">
    <path d="M7.406 15.422l-1.406-1.406 6-6 6 6-1.406 1.406-4.594-4.594z"></path>
</svg>

【问题讨论】：

SeaBass，此页面可能会对您有所帮助：developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform。
@John 谢谢约翰。这看起来也像它旋转元素而不是改变路径。我的最终目标实际上是使用 css 中的路径，这就是我用 css 标记它的原因，但对于我的示例，我只是将它包含在一个 svg 元素中。我将使用:after 将其作为css 背景，并且不想旋转任何其他内容，这就是为什么我要攻击核心并更改整个路径的原因。有意义吗？
“如果有人能告诉我，如果我自己能达到这个结果，那就太好了。”这个问题的答案是通过阅读the SVG specifcation来了解 SVG 路径格式的工作原理。

标签： svg transform

【解决方案1】：

首先你需要给 svg 元素添加一个viewBox 属性。我正在使用viewBox="-12 -12 24 24"，这意味着点 0,0 位于 svg 画布的正中间。接下来我使用<polyline> 创建箭头。由于我使用的是整数，我可以手动编码箭头。

points="0,-10 10,0 0,10"表示y先移动到点x:0,y:-10，我画一条线到点x:10,y:0最后到点X:0,y:10

我已经设置了 svg 元素 width="100" 的 width，但您可以将其更改为您需要的。

svg{border:1px solid}
polyline{fill:none; stroke:black;stroke-linejoin:round;stroke-linecap: round;}

<svg viewBox="-12 -12 24 24" width="100">
  <polyline points="0,-10 10,0 0,10" />
</svg>

<svg viewBox="-12 -12 24 24" width="100">
  <polyline points="0,-10 -10,0 0,10" />
</svg>

<svg viewBox="-12 -12 24 24" width="100">
  <polyline points="-10,0 0,-10 10,0" />
</svg>

<svg viewBox="-12 -12 24 24" width="100">
  <polyline points="-10,0 0,10 10,0" />
</svg>

如果你不喜欢<polyline> 并且你想使用路径，你会这样做：

svg{border:1px solid}
path{fill:none; stroke:black;stroke-linejoin:round;stroke-linecap: round;}

<svg viewBox="-12 -12 24 24" width="100">
  <path d="M0,-10 L10,0 0,10" />
</svg>

<svg viewBox="-12 -12 24 24" width="100">
  <path d="M0,-10 L-10,0 0,10" />
</svg>

<svg viewBox="-12 -12 24 24" width="100">
  <path d="M-10,0 L0,-10 10,0" />
</svg>

<svg viewBox="-12 -12 24 24" width="100">
  <path d="M-10,0 L0,10 10,0" />
</svg>

【讨论】：

【解决方案2】：

您可以用 div 包裹并进行风格化。您当然可以立即将样式用于 svg，但并非所有浏览器都支持它。

.icon {
 height: 20px;
 transform: rotate(90deg);
 width: 20px;
}

<div class='icon'>
 <svg xmlns="http://www.w3.org/2000/svg">
  <path d="M8.578 16.359l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path>
 </svg>
</div>

您也可以使用“变换”属性。

<svg xmlns="http://www.w3.org/2000/svg">
  <path transform='rotate(90 10 10)' d="M8.578 16.359l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path>
</svg>

显然没有其他简单的方法。不过你也可以determine the path in css

如果您通过背景插入 svg（:before 或 :after）you will not be able to change at all。只能通过在 css 中旋转。

【讨论】：

谢谢，但我不想旋转整个元素，我想更改实际路径。
好的，再次感谢。我在想是否有一个在线编辑器，我可以在其中粘贴路径并点击旋转（或以其他方式编辑）并获得新路径。我的谷歌搜索说没有背景旋转 css 元素，当我想到它时，这很奇怪，因为您可以选择位置、大小和其他所有内容。
@SeaBass 看起来你在寻找 like this 的东西。
没找到demo，不过看起来不错！退房。谢谢
这家伙要发起编辑战，所以我会在这里声明：当您可以直接在 @ 上应用 transform 时，您不需要无意义地添加另一个 frigin div 987654329@ 元素本身。

【解决方案3】：

转换<path>的CSS解决方案。

path{
    transform: rotate(90deg);
    transform-box: fill-box;
    transform-origin: center;
}

<svg xmlns="http://www.w3.org/2000/svg">
    <path d="M8.578 16.359l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path>
</svg>

我不知道浏览器对transform-box 的支持，但这个东西实际上解决了我在项目中的问题。

【讨论】：