SVG - cerchio scala dal centro

Voglio ridimensionare il mio arco che è incorporato in svg. Mentre applica la trasformazione di scala, viene ridimensionato verso 0, 0. Invece di quello, voglio che sia ridimensionato al centro dal suo.SVG - cerchio scala dal centro

Ecco il codice

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

fonte

2012-07-17 user10

Non

del tutto soddisfacente, perché ho stato incapace di lasciare invariata la tua forma originale, ma l'effetto richiesto uired sembra 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>

Puoi provare this violino

fonte

2012-07-17 20:25:07 CapelliC

Dopo 5 anni questo ha più senso :), evviva. – ProllyGeek

Utilizzando l'elemento <circle> e animare la "r" attributo:

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

fonte

2012-07-17 08:08:20 mbonnin

Questo dovrebbe essere scelta come la risposta corretta. – ProllyGeek

@ProllyGeek: Mi chiedo se hai notato che la risposta non affronta ** qualsiasi ** dei problemi nella domanda, a partire dall'utilizzare ** un altro **, più semplice, la forma del necessario ... – CapelliC

@CapelliC You È giusto che i neofiti di questa tecnologia abbiano bisogno di capire le differenze qui. @ ProllyGeek La domanda ha chiesto come animare la scala, non il raggio. Mentre in effetti la stessa visuale per un cerchio, le implicazioni di questo concetto applicate ad altri elementi sono molto diverse. Questo non dovrebbe essere scelto come risposta corretta. – RedYetiCo

SVG - cerchio scala dal centro

risposta

Problemi correlati