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>

Answer 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的{{1}}，但是您可以将其更改为所需的内容。

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

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

您还可以使用'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>

显然，没有其他简单的方法。但是您也可以determine the path in css

如果您通过背景（：before或：after）you will not be able to change at all插入svg。仅通过旋转CSS。

将实际的svg路径旋转90度？

2 个答案: