我有一个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>