Svg Rotate Path

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>

How to rotate svg circle in place?

Use transform-box: fill-box and transform-origin:50% 50% like so:

svg {
  height: 100vh;
}

path {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation-duration: 3s;
  animation-name: rotate;
  animation-iteration-count: infinite;
}

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

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1067.04 677.07">    
    <path class=""
        d="M164.41,202.61A52.49,52.49,0,0,0,149.93,201l-7.83-8.2L134.5,195l-8.29,2.39-1.58,10.92a52.37,52.37,0,0,0-11.4,9.07l-11.17-.56-4,7.23-.76,1.37-.75,1.36-4,7.23L99,243.14a52.38,52.38,0,0,0-1.63,14.47L89,264.77l2.39,8.28,2.19,7.61,11.12,2.26a52.31,52.31,0,0,0,9.07,11.39l-1.28,10.78,8,4.39,7.95,4.39,8.44-6.82a52,52,0,0,0,14.47,1.62l7.83,8.21,7.61-2.19L175,312.3l1.58-10.92A52.3,52.3,0,0,0,188,292.3l11.17.57,4-7.23.76-1.37.75-1.37,4-7.22-6.42-9.16a52.45,52.45,0,0,0,1.62-14.47l8.41-7.16-2.39-8.28L207.66,229l-11.12-2.26a52.12,52.12,0,0,0-9.08-11.4l1.28-10.77-8-4.39-7.95-4.39Zm21.12,69.74q-.37.69-.78,1.35c-.23.47-.47.93-.73,1.38a39.05,39.05,0,1,1-68.36-37.77q.38-.69.78-1.35c.23-.47.48-.93.73-1.39a39.05,39.05,0,0,1,68.36,37.78Z"
        />
  
</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>

Rotate an svg path around its own centre using d3

You can get the position of the <path> with getBBox():

const centre = knob.node().getBBox();

Then, it's just a matter of calculating its centre:

knob.attr("transform", "rotate(" + angle + ", " + 
    (centre.x + centre.width / 2) + ", " + (centre.y + centre.height / 2) + ")");

Here angle is, obviously, the angle you want.

Here is a demo using your SVG (but smaller), click anywhere in the SVG to rotate the path:

let toggle = 0;let svg = d3.select("svg")const knob = d3.select("#switch1")const centre = knob.node().getBBox();svg.on("click", function() {  const angle = (toggle = 1 - toggle) ? 90 : 0;  knob.attr("transform", "rotate(" + angle + ", " + (centre.x + centre.width / 2) + ", " + (centre.y + centre.height / 2) + ")");})

svg { border: 1px solid gray; background-color: lavender; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script><?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="200" height="100" viewBox="0 0 50 50" id="svg2" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="bar.svg">  <defs     id="defs4" />  <sodipodi:namedview     id="base"     pagecolor="#ffffff"     bordercolor="#666666"     borderopacity="1.0"     inkscape:pageopacity="0.0"     inkscape:pageshadow="2"     inkscape:zoom="11.2"     inkscape:cx="34.921875"     inkscape:cy="1047.7595"     inkscape:document-units="px"     inkscape:current-layer="layer1"     showgrid="true"     inkscape:window-width="1920"     inkscape:window-height="1033"     inkscape:window-x="-4"     inkscape:window-y="-4"     inkscape:window-maximized="1">    <inkscape:grid       type="xygrid"       id="grid4157" />  </sodipodi:namedview>  <metadata     id="metadata7">    <rdf:RDF>      <cc:Work         rdf:about="">        <dc:format>image/svg+xml</dc:format>        <dc:type           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />        <dc:title />      </cc:Work>    </rdf:RDF>  </metadata>  <g     inkscape:label="Layer 1"     inkscape:groupmode="layer"     id="layer1">    <path       id="switch1"       style="display:inline;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.12199998;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"       d="m 35.741778,27.194664 -1.082299,0 0,-8.512001 1.082299,-9e-6 z m -5.563199,-4.274211 a 5.00005,5.000032 0 0 0 9.999999,2e-5 5.00005,5.000032 0 1 0 -9.999999,-2e-5 z"       inkscape:connector-curvature="0" />    <text       xml:space="preserve"       style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"       x="25.714285"       y="13.612206"       id="text4135"       sodipodi:linespacing="125%"><tspan         sodipodi:role="line"         id="tspan4137"         x="25.714285"         y="13.612206"         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:125%;font-family:Sans;-inkscape-font-specification:'Sans, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start">OFF</tspan></text>    <text       xml:space="preserve"       style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"       x="44.566826"       y="26.086744"       id="text4135-2"       sodipodi:linespacing="125%"><tspan         sodipodi:role="line"         id="tspan4137-2"         x="44.566826"         y="26.086744"         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:125%;font-family:Sans;-inkscape-font-specification:'Sans, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start">ON</tspan></text>  </g></svg>

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>

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

How to rotate a SVG object around its own center?

As I've commented you need to add .Gear { animation: rotate 3s infinite; transform-origin: 50% 50%; transform-box: fill-box; } to the css.

 .Gear {  animation: rotate 3s infinite;   transform-origin: 50% 50%;   transform-box: fill-box; } @keyframes rotate{    from{       transform: rotate(0deg);}to{       transform: rotate(360deg);    } }

<svg   id="svg8"   version="1.1"   viewBox="0 0 151.07708 104.24584"   height="394"   width="571">    <g        transform="translate(2.1166667,-0.52916663)" id="BlueBigMiddleGear" style="display:inline;opacity:1;">      <path style="opacity:1;fill:#00a2a2;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;" d="m 18.56808,26.571725 c 3.275987,0.593468 5.566928,-3.837863 3.354539,-5.905877 2.060394,-2.103327 4.554573,-3.44753 7.370537,-4.228609 3.039988,3.951776 5.072643,2.096573 7.063427,0 2.964733,0.684319 5.126395,2.38586 7.157927,4.252232 -1.375995,3.387617 -0.456277,5.532848 3.519902,6.023994 0.978251,2.764264 0.950956,5.496092 -0.02363,8.197361 -3.529105,0.674199 -4.86411,2.602169 -3.543527,6.047618 -2.020934,1.811043 -4.052787,3.610561 -7.181546,4.252233 -2.285064,-2.600365 -4.628765,-2.737974 -7.039808,-0.04725 -2.530906,-0.889292 -5.092152,-1.679982 -7.1343,-4.157739 1.350522,-2.998678 0.192879,-5.025441 -3.496279,-6.071243 -0.882856,-2.787573 -0.865144,-5.575147 -0.04724,-8.36272 z" id="path1423" />      <ellipse style="opacity:1;fill:#00a2a2;fill-opacity:1;stroke:#ffffff;stroke-width:8.47981644;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill;" id="path1430" cx="32.735146" cy="30.88035" rx="4.403945" ry="4.2703118" />    </g>     <g transform="rotate(-6.5973029,34.401484,29.663413);" style="display:inline" id="Gear"  class="Gear" >      <path style="opacity:1;fill:#d14330;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 44.553944,39.635527 c 0.759184,-2.153091 2.305531,-2.691365 3.897878,-3.165549 2.004141,1.775246 3.092697,0.749881 4.039622,-0.708707 2.071027,0.07811 3.438224,0.805907 4.701076,1.630024 -0.458034,1.912119 -0.200249,3.386793 2.716705,3.23642 0.666429,1.622148 1.272712,3.244296 0.826823,4.866444 -1.948655,0.784004 -2.499529,2.043252 -1.299292,3.897879 -1.018053,1.3543 -2.242948,2.455793 -3.82701,3.118305 -1.827113,-1.587302 -3.075307,-0.903465 -4.086868,0.708705 -1.440932,0.07133 -3.008161,-0.425679 -4.701077,-1.488282 0.426697,-2.797344 -0.9364,-3.293526 -2.693082,-3.283669 -0.933271,-1.379303 -1.4003,-2.914021 -0.826823,-4.795573 1.91108,-0.754162 2.238206,-2.128133 1.252048,-4.015997 z" id="path1438" />      <circle style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:9.71524143;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" id="path1441" cx="51.99535" cy="44.62009" r="2.5277159" />    </g>    </svg>

---

Related Topics