SVG - 從中心起的刻度圓

我想縮放嵌入在svg中的弧。在應用比例變換時，它將縮放到0,0。相反，我希望它從它自己的中心縮放。SVG - 從中心起的刻度圓

這裏是代碼

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

來源

2012-07-17 user10

不能完全令人滿意，因爲我不能保持原來的形狀不變，但效果req uired似乎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>

您可以嘗試this小提琴

來源

2012-07-17 20:25:07 CapelliC

5年後，這更有意義:)，歡呼聲。 – ProllyGeek 2017-01-09 14:31:32

使用<circle>元素和動畫的「R」屬性：

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

來源

2012-07-17 08:08:20 mbonnin

這應該作爲選件爲正確答案。 – ProllyGeek 2014-03-05 23:50:03

@ProllyGeek：我想知道你是否注意到答案沒有解決**問題中的任何**問題，從使用**另一個**，更簡單，比所需的形狀開始... – CapelliC 2014-03-06 07:54:23

@CapelliC You'對於這項技術需要理解這裏的差異。@ ProllyGeek這個問題問到如何動畫比例而不是半徑。雖然實際上對於一個圓圈來說是相同的視覺效果，但是將這個概念應用於其他元素的含義卻有很大不同。這不應該被選爲正確的答案。 – RedYetiCo 2015-03-19 14:24:35

SVG - 從中​​心起的刻度圓

回答

相關問題

SVG - 從中心起的刻度圓