Bu svg dosya düzgün şekilde dönmüyor

Question

Benim svg kodumla ilgili bazı sorunlarım var. Svg dosyasını html'ye dönüştürmeye çalışıyordum ve düzgün bir şekilde dönmüyordu, sadece dönüyor, ekseninde döndürmek istiyorum, bana yardım edebilir misiniz?

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

döndür açısına ek olarak iki ek parametreler alabilir dönüşümü:

İşte benim kod. Bunlar rotasyon merkezinin X ve Y koordinatları.

Eğer döndürme merkezini from ve to özniteliklerinize eklerseniz, şeklin kendi merkezi etrafında dönecektir.

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

Ayrıca, her bir katman için yinelenen <animateTransform> unsurları olması gerekmez. Her iki katmanı içeren bir grup eklerseniz, bunları hem tek bir animasyon öğesiyle hem de canlandırabilirsiniz.