SVG - Maßstab von der Mitte

Question

Ich möchte meinen Bogen, der in Svg eingebettet ist skalieren. Während die Skalierung transformiert wird, wird sie auf 0, 0 skaliert. Stattdessen möchte ich, dass sie von ihrem eigenen Zentrum aus skaliert wird.

Hier ist der Code

<g>     
    <path d="M 300 100 a 200 200 0 1 0 0.00001 0" fill="#7EEC4A" stroke="rgb(208,231,235)" linejoin="round" stroke-width="1" fill-opacity="0.9" stroke-opacity="0.2"> 
    </path> 

    <animateTransform attributeType="xml" 
     attributeName="transform" 
     type="scale" 
     from="0" 
     to="1" 
     dur="0.5s" fill="freeze" /> 
</g> 

Answer 1

Nicht ganz zufrieden stellend, denn ich habe konnte nicht Ihre ursprüngliche Form unverändert lassen, aber der Effekt req uired scheint OK:

<g transform="translate(300,250)"> 
     <g> 
      <path d="M 0 -150 a 200 200 0 1 0 0.00001 0" fill="#7EEC4A" 
       stroke="rgb(208,231,235)" linejoin="round" stroke-width="1" fill-opacity="0.9" 
       stroke-opacity="0.2"> 
      </path> 
      <animateTransform attributeType="xml" 
       attributeName="transform" 
       type="scale" 
       from="0" 
       to="1" 
       dur="0.5s" fill="freeze" /> 
     </g> 
    </g> 

Sie this Geige versuchen können

Answer 2

Mit dem <circle> Element und Animieren das "r" Attribut:

<g>     
    <circle cx="200" cy="200" r="200" fill="#7EEC4A" stroke="rgb(208,231,235)" linejoin="round" stroke-width="1" fill-opacity="0.9" stroke-opacity="0.2"> 
     <animate attributeType="xml" attributeName="r" from="0" to="200" dur="5s" repeatCount="indefinite" />  
    </circle> 
</g>