将实际svg路径旋转90度？
将实际svg路径旋转90度？
提问于 2019-05-07 08:29:19
我有一条想要旋转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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-07 15:37:50
首先，您需要向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>，但你想使用path，你可以这样做：
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>
Stack Overflow用户
发布于 2019-05-07 08:33:02
您可以将其封装在div和stylize中。当然，您可以立即将该样式用于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
如果通过background (:before或:after) you will not be able to change at all插入svg。仅通过在css中旋转。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56014003
复制相关文章
相似问题
腾讯云开发者
