html - 如何在嵌套的 SVG 元素上设置旋转点

Question

最近，我决定尝试并学习 CSS 转换。现在，我决定尝试使用 SVG 和一些转换制作一个通用的移动按钮。

我想要做的是让移动按钮旋转 90 度，并在元素的正中心设置变换原点。

这是我的代码:

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

目标:将变换原点设置为 .mobileNav 的中心。

问题:我无法实现。

浏览器:我的浏览器是Firefox 44.0.2

Answer 1

ul 具有需要重置的默认 padding 或 margin。

li 和 svg 可以重置为 inline-block。

让我们为调试画一个边框以查看情况。

vertical-aign + line-height 将有助于将 height 定义为 ul 并将设置 childs在垂直中间。

 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>