如何在嵌套的 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

您的问题是默认填充。为了增加效果，您还可以将 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>

Answer 2

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

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

让我们为调试画一个边框，看看情况如何。

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

 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>

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

How to set a rotation point on a nested SVG Element

html

css

svg

transform