Rotate actual svg path 90 degrees?

Question

I have this path that I want to rotate 90 degrees. Not just rotate the whole element, I want to change the actual path to get an up arrow as well as a down arrow. Is there a path transform tool out there or some other easy way to do it?

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

I actually found an svg library that had the exact shapes that I'm looking for (see below). If anyone can tell me how I would have reached that result on my own that would be great. Thanks!

<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, this page will likely help you: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform. — John, May 07 '19 at 00:42
@John Thanks John. That also looks like it rotates the element instead of changing the path. My ultimate goal is actually to use the path in css, which is why I tagged it with css, but for my example I just included it in an svg element. I will put it as a css background using `:after` and don't want to rotate anything else, which is why I want to attack the core and change the whole path. Makes sense? — SeaBass, May 07 '19 at 00:45
"If anyone can tell me how I would have reached that result on my own that would be great." The answer to this question is to learn how the SVG path format works by reading [the SVG specifcation](https://www.w3.org/TR/SVG11/single-page.html#chapter-paths). — Paul LeBeau, May 07 '19 at 13:02

score 1 · Accepted Answer · answered May 07 '19 at 07:37

First you need to add a viewBox attribute to the svg element. I'm using viewBox="-12 -12 24 24" which means that the point 0,0 is in the very middle of the svg canvas. Next I'n using <polyline> to create the arrow. Since I'm using round numbers I can code the arrow manually.

points="0,-10 10,0 0,10" means that y first move to the point x:0,y:-10, I draw a line to the point x:10,y:0 and finally to the point X:0,y:10

I've setter the width of the svg element width="100" but you can change it to what you need.

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>

If you don't like <polyline> and you want to use path this is how you would do it:

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>

nTheta · Answer 2 · 2022-02-22T16:06:45.557

1

CSS solution for transforming <path>.

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>

I don't know the browser support for the transform-box but this thing actually solved my problem in my project.

edited Feb 22 '22 at 16:06

answered Feb 22 '22 at 15:58

nTheta

539
3
12

Timofey Goncharov · Answer 3 · 2019-05-07T01:21:45.103

0

You can wrap in div and stylize. You can of course use the style immediately for svg but not all browsers support it.

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

You can also use the attribute '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>

Apparently there are no other simple ways. But you can also determine the path in css

If you insert svg through background (:before or :after) you will not be able to change at all. Only via rotate in css.

edited May 07 '19 at 01:21

answered May 07 '19 at 00:33

Timofey Goncharov

1,023
1
6
14

Thanks, but I don't want to rotate the whole element, I want to change the actual path. – SeaBass May 07 '19 at 00:34
Ok, thanks again. I was thinking if there was an online editor where I could paste the path and hit rotate (or edit in other ways) and get a new path. My googling said that there is no background-rotate css element, which when I think about it is weird since you can choose position, size and everything else. – SeaBass May 07 '19 at 01:27
@SeaBass Looks like you were looking for something [like this](https://marketplace.visualstudio.com/items?itemName=henoc.svgeditor&ssr=false#overview). – Timofey Goncharov May 07 '19 at 01:34
I didn't find a demo, but it looks good! Checking out. Thanks – SeaBass May 07 '19 at 01:52
This guy is going to start an edit war so instead I'll state right here: you do not need to pointlessly add another frigin `div` when you can apply the `transform` directly on the `svg` element itself. – John May 07 '19 at 22:50

Rotate actual svg path 90 degrees?

3 Answers3