旋转实际的svg路径90度？

Question

我有一条路径，想将其旋转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

---

SeaBass，这个页面可能会对你有所帮助：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/transform。 - undefined

@John 谢谢约翰。看起来这个方法似乎是旋转元素而不是改变路径。我的最终目标实际上是在CSS中使用路径，这就是为什么我用CSS标记了它，但是在我的示例中，我只是将它包含在一个SVG元素中。我将使用:after将其作为CSS背景，并且不想旋转其他任何东西，这就是为什么我想攻击核心并改变整个路径的原因。明白吗？ - undefined

如果有人能告诉我如何独立达到这个结果，那就太好了。回答这个问题的方法是通过阅读SVG规范来学习SVG路径格式的工作原理。 - undefined

Answer 1

用于转换<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的浏览器兼容性，但在我的项目中，它实际上解决了我的问题。

- nTheta

Answer 2

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

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

我设置了svg元素的width为100，但您可以根据需要进行更改。

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>

- enxaneta

Answer 3

你可以用 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>

你还可以使用属性 'transform'。

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

看起来似乎没有其他简单的方法。但你也可以在 CSS 中 确定路径。

如果你通过背景（:before或:after）插入 SVG，你将无法进行任何更改。只能通过 CSS 中的旋转来实现。

- Timofey Goncharov

---

谢谢，但是我不想旋转整个元素，我想改变实际路径。 - undefined

好的，再次感谢。我在想是否有一个在线编辑器，在那里我可以粘贴路径，并点击旋转（或以其他方式进行编辑），然后得到一个新的路径。我的搜索结果显示，没有background-rotate CSS元素，这让我感到很奇怪，因为你可以选择位置、大小和其他所有东西。 - undefined

@SeaBass 看起来你在寻找类似的东西 like this。 - undefined

我没有找到演示，但看起来不错！正在查看。谢谢 - undefined

这个人要开始一场编辑战，所以我在这里声明：当你可以直接在svg元素本身上应用transform时，你不需要无意义地添加另一个该死的div。 - undefined