SVG - vòng tròn tỷ lệ từ trung tâm

Question

Tôi muốn chia tỷ lệ vòng cung của mình được nhúng trong svg. Trong khi áp dụng quy mô biến đổi, nó được quy mô về phía 0, 0. Thay vì đó, tôi muốn nó được thu nhỏ trung tâm từ nó là của riêng.

đây là mã

<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

Không hoàn toàn thỏa đáng, bởi vì tôi đã không thể không thay đổi hình dạng ban đầu của bạn, nhưng hiệu ứng req uired có vẻ 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> 

Bạn có thể thử this fiddle

Answer 2

Sử dụng các yếu tố <circle> và hoạt cảnh "r" thuộc tính:

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