Diese SVG-Datei dreht sich nicht richtig

Question

Ich habe ein paar Probleme mit meinem SVG-Code. Ich habe versucht, meine Svg-Datei in HTML zu konvertieren und es dreht sich nicht richtig, stattdessen dreht es sich gerade um, ich möchte es in seiner Achse drehen, können Sie mir bitte helfen?

Hier ist mein Code:

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

Die Dreh verwandeln können zwei zusätzliche Parameter neben dem Winkel nehmen. Dies sind die X- und Y-Koordinaten des Rotationszentrums.

Wenn Sie also das Rotationszentrum zu Ihren Attributen from und to hinzufügen, wird Ihre Form um ihre Mitte roatatieren.

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

Auch brauchen Sie nicht für jede Ebene duplizieren <animateTransform> Elemente haben. Wenn Sie eine Gruppe hinzufügen, die beide Ebenen enthält, können Sie sie beide mit einem einzelnen Animationselement animieren.