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

debugcn 发表于 Dev

HTMLNoob

最近，我决定尝试并学习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

约瑟夫·马里克尔

您的问题是默认填充。为了增加效果，您还可以将SVG和li设置为不内联显示或内联块显示。然后将它们浮动，使它们垂直对齐。那应该使它不那么笨拙。

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。