Rotate Svg Path Using CSS

Rotate SVG path using CSS

Just use the element type selector and add the transform: rotate(180deg) property to it like in the below snippet.

* {  background: #e1e1e1;}svg {  transform: rotate(180deg);}

<svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">  <path d="M0 0 L100 100 L0 100" stroke-width="0"></path></svg>

Rotate actual svg path 90 degrees?

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>

SVG Path rotation animation

You need to add transform-box: fill-box; This will make the object bounding box to be used as the reference box.

.wing1 {
  transform-origin: bottom right;
  transform-box: fill-box;
  animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
  @keyframes spin {
    50% { transform: rotate(45deg); }
    100% { transform: rotate(0deg); }
  }
}

css rotate introduces outline when using SVG clip-path or mask

As a workaround you could rotate the clipPath instead:

#blob {
  background: red;
  width: 500px;
  height: 500px;
  clip-path: url(#myClip);
}

<div id="blob"></div>
<svg viewBox="0 0 397 409">
    <defs>
        <path d="M320.403196,424.677624 C426.787532,365.585154 447.310044,306.188587 433.45394,197.28033 C419.597836,88.3720737 316.997962,53.8862578 227.347416,40.9086547 C144.650118,28.9375873 104.472702,88.6407456 69.862267,131.812053 C15.52584,199.588564 48.3439099,300.905451 80.8563197,361.757908 C110.80391,417.809872 214.018859,483.770094 320.403196,424.677624 Z" id="path-1" />
        <clipPath id="myClip" transform="rotate(20)" transform-origin="center">
          <use href="#path-1"></use>
        </clipPath>
    </defs>
</svg>

Rotate a scalable and translated SVG element around its center

Well the easiest way to do this is to draw the original shapes at the origin, then rotate them, then scale them, then move them into the final position that you want. So change that initial relative m to an absolute M and move the initial drawing point so that the center of the arrow will coincide with the origin. (You need to add the "l" to toggle the rest of the path back to relative draw.)

Transforms are applied in reverse order, so you want your rotate last (applied first) and your translate first (applied last).

(I've added fill-opacity so you can see what's happening a bit better)

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2000 2000">        <g>        <path class="A" transform="translate(1000 1000) scale(20) rotate(0)"  d="M 0.75,-14.3 l16.5,14.3-16.5,14.3v-6.8h-15v-15h15v-6.8z" fill-opacity="0.5"/>        <path class="B" transform="translate(1000 1000) scale(20) rotate(45)" d="M 0.75,-14.3 l16.5,14.3-16.5,14.3v-6.8h-15v-15h15v-6.8z" fill-opacity="0.5"/>        <path class="C" transform="translate(1000 1000) scale(20) rotate(90)" d="M 0.75,-14.3 l16.5,14.3-16.5,14.3v-6.8h-15v-15h15v-6.8z" fill-opacity="0.5"/>        </g>    </svg>

Rotate svg path around circle

I don't know why the site, that you linked to, uses a mix of HTML and SVG to make this animation. But it is certainly not a simple way of achieving this.

It is much simpler to just put the circle into the SVG also.

.circle-segment {  width: 360px;  height: 360px;}

<div class="circle-wrap">  <div class="main-circle">
    <svg class="circle-segment" class="circle-wrap"         xmlns="http://www.w3.org/2000/svg" version="1.1"         xmlns:xlink="http://www.w3.org/1999/xlink" >      <circle cx="180" cy="180" r="150" fill="#0c272e"/>      <path id="little" d="M180,180 v-180 a180,180 0 0,0 -180,180 z"                    fill="#066a8e">        <animateTransform attributeName="transform"                           attributeType="XML"                           type="rotate"                           from="00 180 180"                           to="360 180 180"                           dur="10s"                           repeatCount="indefinite"/>      </path>        </svg>  </div></div>

svg path shifts from it's normal position while rotating

transform-origin:center is what you need but you have to consider the transform already applied to the seconds-hand. I have added a g element for it

@keyframes rotate-hand{
  from{transform: rotate(0deg);}
  to{transform: rotate(360deg)}
}

/* comment this to see the original hands-shape*/
#seconds-hand, #minutes-hand, #hours-hand{
    animation: rotate-hand 5s linear infinite;
    transform-origin:center;
}
#minutes-hand {
  animation-duration:2s;
}
#seconds-hand {
  animation-duration:1s;
}

<svg xmlns="http://www.w3.org/2000/svg" width="170.5" height="170.5" viewBox="0 0 170.5 170.5" overflow="scroll">
    <path id="border_1_"
          d="M85.3 0C38.2 0 0 38.2 0 85.3s38.2 85.3 85.3 85.3 85.3-38.2 85.3-85.3S132.3 0 85.3 0zm-1 160c-40.6 0-73.5-32.9-73.5-73.5S43.7 13 84.3 13s75.5 32.9 75.5 73.5-35 73.5-75.5 73.5z"
          fill="#002745"/>

    <g id="seconds-hand">
    <path  transform="rotate(134.355 99.90008916 100.15364826)" fill="#2fc0ea"
          d="M99.1 78.9h1.5v42.5h-1.5z"/>
  
    </g>
    <path id="hours-hand" d="M86.2 88.3h-2.5c-.5 0-1-.4-1-1V48.7c0-.5.4-1 1-1h2.5c.5 0 1 .4 1 1v38.6c0 .6-.5 1-1 1z"
          fill="#002745"/>
  
  
    <path id="minutes-hand"
          d="M69.2 102.7c-.9-.9-.9-2.3-.1-3.1l14.2-14.7c.9-.9 2.3-.9 3.1-.1.9.9.9 2.3.1 3.1l-14.2 14.7c-.8.9-2.2.9-3.1.1z"
          fill="#002745"/>
  
</svg>

---

Related Topics