このsvgファイルは正しく回転していません

Question

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

Answer 1

回転変換角度に加えて、2つの追加のパラメータを取ることができます。これらは回転中心の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>の要素を持っている必要はありません。両方のレイヤーを含むグループを追加すると、両方のレイヤーを1つのアニメーション要素でアニメートできます。