CODEWITHSUNDEEP
htmlcsssvgtransform
HTMLNoob
HTMLNoob

Reputation: 821

How to set a rotation point on a nested SVG Element

Recently, I decided to experiment and learn about CSS Transforms. Now, I decided to try and make a common mobile button using SVG and a few transforms.

What I'm trying to do is to make the mobile button rotate 90 degrees with a transform origin on the very center of the element.

Here is my code:

.mobileNav {
    display: block;
    transition: .5s;
  }
  
   .mobileNav:hover {
    transform: rotate(90deg);
    transform-origin: 50% 50%;
     /*This is where the problem lies. How do I set the origin to the center of .mobileNav?? */
  }
 
ul {
    
    float: right;
    margin: 15px 50px 0px 0px;
  }
  
  li {
    display: inline-block;
    
    
    transition: .5s;
  }
<ul class="mobileNav">
				<li>
					<svg x="0px" y="0px" width="10" height="20">
   					<circle cx="5" cy="10" r="3"  stroke-width="4" fill="#333" />
   					Sorry, your browser does not support inline SVG.
					</svg> 
				</li>
				<li>
					<svg x="0px" y="0px" width="10" height="20">
   					<circle cx="5" cy="10" r="3"  stroke-width="4" fill="#333" />
   					Sorry, your browser does not support inline SVG.
					</svg> 
				</li>
				<li>
					<svg x="0px" y="0px" width="10" height="20">
   					<circle cx="5" cy="10" r="3"  stroke-width="4" fill="#333" />
   					Sorry, your browser does not support inline SVG.
					</svg> 
				</li>
				</ul>

GOAL: To set the transform origin to the center of .mobileNav.

PROBLEM: I am unable to achieve this.

BROWSER: My browser is Firefox 44.0.2

Upvotes: 0

Views: 406

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105863

ul has defaut padding or margin that needs a reset.

li and svg could be reset to inline-block.

Lets draw a border for debug to see where things stand.

vertical-aign + line-height will help to define an height to ul and will set childs at vertical middle.

 body {
  margin-top:50px;/* snippet wants this */
 }

.mobileNav {
  display: block;
  transition: .5s;
  border: solid;
  padding: 0
}
.mobileNav:hover {
  transform: rotate(90deg);
}
ul {
  float: right;
  margin: 15px 50px 0px 0px;
  line-height: 1em;
}
li,
svg {
  display: inline-block;
  vertical-align: middle;
  transition: .5s;
}
<ul class="mobileNav">
  <li>
    <svg x="0px" y="0px" width="10" height="20">
      <circle cx="5" cy="10" r="3" stroke-width="4" fill="#333" />Sorry, your browser does not support inline SVG.
    </svg>
  </li>
  <li>
    <svg x="0px" y="0px" width="10" height="20">
      <circle cx="5" cy="10" r="3" stroke-width="4" fill="#333" />Sorry, your browser does not support inline SVG.
    </svg>
  </li>
  <li>
    <svg x="0px" y="0px" width="10" height="20">
      <circle cx="5" cy="10" r="3" stroke-width="4" fill="#333" />Sorry, your browser does not support inline SVG.
    </svg>
  </li>
</ul>

Upvotes: 2

Joseph Marikle
Joseph Marikle

Reputation: 78520

Your problem is the default padding. For added effect, you can also set the SVG and li's to not be display inline or inline-block. Then float them so the align vertically. That should make it not as janky.

body {padding: 3em;}
.mobileNav {
    display: block;
    transition: .5s;
    padding: 0;
  }
  
   .mobileNav:hover {
    transform: rotate(90deg);
    transform-origin: 50% 50%;
     /*This is where the problem lies. How do I set the origin to the center of .mobileNav?? */
  }
 
ul {
    
    float: right;
    margin: 15px 50px 0px 0px;
  }
  
  li {
    display: inline-block;
    
    
    transition: .5s;
  }

 .mobileNav svg, .mobileNav li {
      display:block;
      float:left;
 }
<ul class="mobileNav">
				<li>
					<svg x="0px" y="0px" width="10" height="20">
   					<circle cx="5" cy="10" r="3"  stroke-width="4" fill="#333" />
   					Sorry, your browser does not support inline SVG.
					</svg> 
				</li>
				<li>
					<svg x="0px" y="0px" width="10" height="20">
   					<circle cx="5" cy="10" r="3"  stroke-width="4" fill="#333" />
   					Sorry, your browser does not support inline SVG.
					</svg> 
				</li>
				<li>
					<svg x="0px" y="0px" width="10" height="20">
   					<circle cx="5" cy="10" r="3"  stroke-width="4" fill="#333" />
   					Sorry, your browser does not support inline SVG.
					</svg> 
				</li>
				</ul>

Upvotes: 1

Related Questions