使 SVG 图标的元素在起始位置的中心旋转

【问题标题】：Make element of SVG icon rotate on center of start position使 SVG 图标的元素在起始位置的中心旋转
【发布时间】：2016-08-06 05:21:44
【问题描述】：

我有一个 SVG 图标，我使用 CSS 类将它分成单独的部分（分成电话和圆形边框）。我想要将旋转变换应用于一个元素。目前该元素在左上角的轴上旋转，（我相信这一定是 SVG 的 (0,0)），我希望它在一个元素的中心旋转 - 基本上在其他元素。我无法让 transform-origin 工作。有没有办法做到这一点？

HTML

.phone-us{
	width: 96px;
    height: 96px;
    margin: 0 auto;
    display: block;
	margin: 0 auto;
    display: block;
}

.phone-icon{
transform:translate(-549.9px, -168px);
}

@keyframes rotate {
    100% {
-webkit-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
  }
}

.keepRotatingOne {
-webkit-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
        <svg class="phone-us" id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="121.42mm" width="121.42mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 430.21731 430.21731">
         <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 id="layer1" transform="translate(-4.8913 -316.68)">
          <g transform="translate(4.8913 316.68)">
          <g class="keepRotatingOne">
            <path  class="phone-icon" id="path3" d="m337.48 601.2-1.1628-3.5036c-2.754-8.1856-11.781-16.723-20.074-18.972l-30.692-8.3844c-8.3232-2.2644-20.196 0.78042-26.286 6.8696l-11.108 11.108c-40.369-10.909-72.025-42.565-82.918-82.926l11.108-11.108c6.0896-6.0896 9.134-17.947 6.8696-26.27l-8.3692-30.707c-2.2644-8.308-10.817-17.335-18.987-20.058l-3.5036-1.178c-8.1856-2.7236-19.86 0.0308-25.949 6.12l-16.616 16.631c-2.9684 2.9528-4.8656 11.398-4.8656 11.429-0.58116 52.754 20.104 103.58 57.421 140.9 37.225 37.225 87.86 57.88 140.46 57.436 0.27565 0 8.966-1.8668 11.934-4.8196l16.616-16.616c6.0892-6.0892 8.8432-17.763 6.12-25.949z" fill="#489648" transform="translate(-4.8913 -316.68)"/>
            </g>
          </g>
          <circle id="path4700" cx="220" stroke="#489648" cy="531.79" r="200" stroke-width="30.217" fill="none"/>
         </g>
        </svg>

【问题讨论】：

  • 您可以尝试 transform-origin 但要小心，因为 Chrome 的实现不符合规范，尽管可以说它确实更符合人们的期望。
  • Circular animation not working on SVG的可能重复
  • 感谢 freestock，我现在已经尝试了您链接到的答案中的解决方案。我已将 svg 包装在新的 元素中，尝试使用 translate 使元素居中，但没有成功。似乎无论我在哪里得到原点，元素总是会为那个点旋转一定的径向距离，所以我不能让图标当场旋转。我已经编辑了我的代码以反映我所做的更改

标签： css svg


【解决方案1】：

这是我对你的动画的看法。整个动画被包裹在&lt;g transform=... 中以将其移动到所需的位置（尽管我建议将其包裹在&lt;div&gt; 周围并移动它）。单行 &lt;animate... 替换了所有 CSS 编码。 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 600 600" preserveAspectRatio="none" style="width:300; height:300; top:0; left:0;">
<g transform="scale(0.5) translate(400,0)">
    <g>
        <path  class="phone-icon" id="path3" d="m337.48 601.2-1.1628-3.5036c-2.754-8.1856-11.781-16.723-20.074-18.972l-30.692-8.3844c-8.3232-2.2644-20.196 0.78042-26.286 6.8696l-11.108 11.108c-40.369-10.909-72.025-42.565-82.918-82.926l11.108-11.108c6.0896-6.0896 9.134-17.947 6.8696-26.27l-8.3692-30.707c-2.2644-8.308-10.817-17.335-18.987-20.058l-3.5036-1.178c-8.1856-2.7236-19.86 0.0308-25.949 6.12l-16.616 16.631c-2.9684 2.9528-4.8656 11.398-4.8656 11.429-0.58116 52.754 20.104 103.58 57.421 140.9 37.225 37.225 87.86 57.88 140.46 57.436 0.27565 0 8.966-1.8668 11.934-4.8196l16.616-16.616c6.0892-6.0892 8.8432-17.763 6.12-25.949z" fill="#489648" transform="translate(-4.8913 -316.68)"/>
        <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 220 220" to="360 220 220" dur="3s" repeatCount="indefinite" />
    </g>
    <circle cx="220" cy="220" r="200" fill="none" stroke="#489648" stroke-width="30"></circle>
</g>
</svg>

【讨论】：

    【解决方案2】：

    如果将 path 和 circle 元素与原点居中，则无需转换动画原点，

    然后你可以使用viewbox 属性来移动元素：

    .phone-us{
	width: 96px;
    height: 96px;
    margin: 0 auto;
    display: block;
	margin: 0 auto;
    display: block;
}

/*.phone-icon{
transform:translate(-549.9px, -168px);
}*/

@keyframes rotate {
    100% {
-webkit-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
  }
}

.keepRotatingOne {
-webkit-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
            <svg class="phone-us" id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="121.42mm" width="121.42mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="-215.1 -215.1   430.21731 430.21731">
         <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 id="layer1"> <!--transform="translate(-4.8913 -316.68)"-->
          <g><!--transform="translate(4.8913 316.68)"-->
          <g class="keepRotatingOne">
            <path  class="phone-icon" id="path3" d="m117.48 70-1.1628-3.5036c-2.754-8.1856-11.781-16.723-20.074-18.972l-30.692-8.3844c-8.3232-2.2644-20.196 0.78042-26.286 6.8696l-11.108 11.108c-40.369-10.909-72.025-42.565-82.918-82.926l11.108-11.108c6.0896-6.0896 9.134-17.947 6.8696-26.27l-8.3692-30.707c-2.2644-8.308-10.817-17.335-18.987-20.058l-3.5036-1.178c-8.1856-2.7236-19.86 0.0308-25.949 6.12l-16.616 16.631c-2.9684 2.9528-4.8656 11.398-4.8656 11.429-0.58116 52.754 20.104 103.58 57.421 140.9 37.225 37.225 87.86 57.88 140.46 57.436 0.27565 0 8.966-1.8668 11.934-4.8196l16.616-16.616c6.0892-6.0892 8.8432-17.763 6.12-25.949z" fill="#489648" /><!--transform="translate(-4.8913 -316.68)"-->
            </g>
          </g>
          <circle id="path4700" cx="0" stroke="#489648" cy="0" r="200" stroke-width="30.217" fill="none"/>
         </g>
        </svg>

    我移动了 path.phone-icon 仅更改了起始 m 命令，因此它可能没有完美定位。

    pen

    【讨论】：

      【解决方案3】：

      来自 CSS 使用 transform-origin。

      transform-origin: center center;

      【讨论】：

        猜你喜欢
        • 2018-08-26
        • 2014-04-25
        • 1970-01-01
        • 2018-08-24
        • 1970-01-01
        • 2022-01-21
        • 2012-04-15
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode