Question

我有一个SVG图标，我已经使用CSS类拆分成单独的部分（分为手机和圆形边框）。我想将旋转变换应用于一个元素。目前元素在左上角的轴上旋转，（我相信它必须是SVG的（0,0）），我希望它在一个元素的中心旋转 - 基本上是在现场旋转在另一个元素内。我还没有能够让变形起源发挥作用。有没有办法做到这一点？

HTML

＆＃13;

.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;
}

＆＃13;

        <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>

＆＃13;

Answer 1

这是我对动画的看法。整个动画包裹在<g transform=...中以将其移动到所需位置（尽管我建议将其包裹在<div>附近并移动它）。单行<animate...取代了所有CSS编码。

＆＃13;

<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>

＆＃13;

Answer 2

如果您将ng-include和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">  <g> <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" /> </g> </g> <circle id="path4700" cx="0" stroke="#489648" cy="0" r="200" stroke-width="30.217" fill="none"/> </g> </svg>只更改了起始path.phone-icon命令，因此它可能没有完美定位。

pen

Answer 3

从CSS使用transform-origin。

transform-origin: center center;

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

3 个答案:

pen