我的svg代码存在一些问题。我试图将我的svg文件转换为html并且它没有正确旋转而是只是旋转，我想在它的轴上旋转它，你能帮我吗？
这是我的代码：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px"
height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<g id="Layer_2">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#E1932A" d="M202,307.45c73.567-73.567,162.367-110.35,266.4-110.35
c104.034,0,192.817,36.783,266.35,110.35c73.6,73.533,110.4,162.333,110.4,266.399c0,104.034-36.801,192.817-110.4,266.351
c-73.533,73.566-162.316,110.35-266.35,110.35c-104.033,0-192.833-36.783-266.4-110.35C128.467,766.667,91.7,677.884,91.7,573.85
C91.7,469.783,128.467,380.983,202,307.45z M234.8,340.15C170.267,404.683,138,482.567,138,573.8
c0,91.233,32.267,169.101,96.8,233.601c64.5,64.533,142.367,96.8,233.6,96.8c91.267,0,169.133-32.267,233.6-96.8
c64.533-64.5,96.8-142.367,96.8-233.601c0-91.233-32.267-169.117-96.8-233.65c-64.467-64.5-142.333-96.75-233.6-96.75
C377.167,243.4,299.3,275.65,234.8,340.15z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#7A5215" d="M184.35,573.8c0,78.434,27.733,145.384,83.2,200.851
c55.467,55.466,122.417,83.199,200.85,83.199c78.466,0,145.417-27.733,200.85-83.199c55.5-55.467,83.25-122.417,83.25-200.851
c0-78.466-27.75-145.433-83.25-200.9c-55.434-55.467-122.384-83.2-200.85-83.2c-78.433,0-145.383,27.733-200.85,83.2
C212.083,428.367,184.35,495.333,184.35,573.8z M234.8,340.15c64.5-64.5,142.367-96.75,233.6-96.75
c91.267,0,169.133,32.25,233.6,96.75c64.533,64.533,96.8,142.417,96.8,233.65c0,91.233-32.267,169.101-96.8,233.601
c-64.467,64.533-142.333,96.8-233.6,96.8c-91.233,0-169.1-32.267-233.6-96.8C170.267,742.9,138,665.033,138,573.8
C138,482.567,170.267,404.683,234.8,340.15z"/>
<animateTransform
attributeType="xml"
attributeName="transform"
type="rotate"
from="0"
to="360"
begin="0"
dur="5s"
repeatCount="indefinite" />
</g>
</g>
<g id="Layer_5">
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="465.5498" y1="870.7773" x2="775.1497" y2="870.7773">
<stop offset="0" style="stop-color:#EC2F55"/>
<stop offset="1" style="stop-color:#882434"/>
</linearGradient>
<path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_1_)" d="M465.55,904.2c78.667-0.066,151.717-26.917,219.15-80.55
c33.8-7.834,64.533-18.733,92.2-32.7C723.503,862.792,658.069,910.676,580.6,934.6c-37.356,11.301-75.707,16.617-115.05,15.95
V904.2z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="520.5996" y1="863.9258" x2="656.0996" y2="863.9258">
<stop offset="0" style="stop-color:#76172A"/>
<stop offset="1" style="stop-color:#5F1523"/>
</linearGradient>
<path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_2_)" d="M684.7,823.65
c-67.434,53.633-140.483,80.483-219.15,80.55V857.85c40.033,0,78-7.216,113.9-21.649C615.75,834.233,650.833,830.05,684.7,823.65z
"/>
<animateTransform
attributeType="xml"
attributeName="transform"
type="rotate"
from="0"
to="360"
begin="0"
dur="5s"
repeatCount="indefinite" />
</g>
</g>
</svg>
答案 0 :(得分：1)
除角度外，旋转变换还可以采用两个额外的参数。那些是旋转中心的X和Y坐标。
因此，如果您将旋转中心添加到from和to属性中，您的形状将围绕其中心进行掠过。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px"
height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<g id="both circles">
<g id="Layer_2">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#E1932A" d="M202,307.45c73.567-73.567,162.367-110.35,266.4-110.35
c104.034,0,192.817,36.783,266.35,110.35c73.6,73.533,110.4,162.333,110.4,266.399c0,104.034-36.801,192.817-110.4,266.351
c-73.533,73.566-162.316,110.35-266.35,110.35c-104.033,0-192.833-36.783-266.4-110.35C128.467,766.667,91.7,677.884,91.7,573.85
C91.7,469.783,128.467,380.983,202,307.45z M234.8,340.15C170.267,404.683,138,482.567,138,573.8
c0,91.233,32.267,169.101,96.8,233.601c64.5,64.533,142.367,96.8,233.6,96.8c91.267,0,169.133-32.267,233.6-96.8
c64.533-64.5,96.8-142.367,96.8-233.601c0-91.233-32.267-169.117-96.8-233.65c-64.467-64.5-142.333-96.75-233.6-96.75
C377.167,243.4,299.3,275.65,234.8,340.15z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#7A5215" d="M184.35,573.8c0,78.434,27.733,145.384,83.2,200.851
c55.467,55.466,122.417,83.199,200.85,83.199c78.466,0,145.417-27.733,200.85-83.199c55.5-55.467,83.25-122.417,83.25-200.851
c0-78.466-27.75-145.433-83.25-200.9c-55.434-55.467-122.384-83.2-200.85-83.2c-78.433,0-145.383,27.733-200.85,83.2
C212.083,428.367,184.35,495.333,184.35,573.8z M234.8,340.15c64.5-64.5,142.367-96.75,233.6-96.75
c91.267,0,169.133,32.25,233.6,96.75c64.533,64.533,96.8,142.417,96.8,233.65c0,91.233-32.267,169.101-96.8,233.601
c-64.467,64.533-142.333,96.8-233.6,96.8c-91.233,0-169.1-32.267-233.6-96.8C170.267,742.9,138,665.033,138,573.8
C138,482.567,170.267,404.683,234.8,340.15z"/>
</g>
</g>
<g id="Layer_5">
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="465.5498" y1="870.7773" x2="775.1497" y2="870.7773">
<stop offset="0" style="stop-color:#EC2F55"/>
<stop offset="1" style="stop-color:#882434"/>
</linearGradient>
<path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_1_)" d="M465.55,904.2c78.667-0.066,151.717-26.917,219.15-80.55
c33.8-7.834,64.533-18.733,92.2-32.7C723.503,862.792,658.069,910.676,580.6,934.6c-37.356,11.301-75.707,16.617-115.05,15.95
V904.2z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="520.5996" y1="863.9258" x2="656.0996" y2="863.9258">
<stop offset="0" style="stop-color:#76172A"/>
<stop offset="1" style="stop-color:#5F1523"/>
</linearGradient>
<path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_2_)" d="M684.7,823.65
c-67.434,53.633-140.483,80.483-219.15,80.55V857.85c40.033,0,78-7.216,113.9-21.649C615.75,834.233,650.833,830.05,684.7,823.65z
"/>
</g>
</g>
<animateTransform
attributeType="xml"
attributeName="transform"
type="rotate"
from="0 468.425 573.825"
to="360 468.425 573.825"
begin="0"
dur="5s"
repeatCount="indefinite" />
</g>
</svg>
此外，您不需要为每个图层添加重复的<animateTransform>元素。如果添加包含两个图层的组，则可以使用单个动画元素为它们设置动画。