logo标签列表

SVG图标元素如何在起始位置的中心点旋转？

csssvg
3
我有一个SVG图标，使用CSS类将其分成不同的部分（分成电话和圆形边框）。我想对其中一个元素应用旋转变换。目前该元素在左上角的轴上旋转（我认为这必须是SVG的(0,0)），我希望它在一个元素中心旋转 - 在另一个元素中心点上旋转。我无法让transform-origin起作用。有没有办法实现这个效果？ 

.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的实现不符合规范，尽管可以说它更接近人们的期望。 - Robert Longson
1
可能是SVG上的循环动画无法工作的重复问题。 - L777
谢谢freestock，我已经尝试了你链接的答案中的解决方案。我将svg包装在新的<g>元素中，并尝试使用translate使元素居中，但没有成功。无论我从哪里获取原点，该元素都会始终围绕该点旋转一定的弧度距离，使得我无法使图标在原地旋转。我已编辑我的代码以反映我所做的更改。 - ecclesm
3个回答
2
这是我对你的动画的看法。整个动画被包裹在<g transform=...中，以将其移动到所需位置（尽管我建议将其包裹在<div>中并进行移动）。一行代码的<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>

1
如果你将路径（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

0

从 CSS 使用 transform-origin。

transform-origin: center center;

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接