SVG - 以中心为基准缩放圆形

Question

我想要缩放嵌入在 SVG 中的弧形。应用缩放变换时，它会朝着 (0, 0) 缩放。相反，我希望它从自己的中心缩放。

以下是代码：

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

- user10

Answer 1

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

- mbonnin

---

@ProllyGeek：我想知道你是否注意到答案没有解决问题中的任何一个，从使用比所需更简单的另一个形状开始... - CapelliC

@CapelliC 你说得很对，对于这项技术的新手需要理解这里的区别。 @ProllyGeek 问题是如何动画缩放，而不是半径。虽然对于圆形来说视觉效果相同，但是这个概念在应用于其他元素时的影响则大为不同。这不能选作正确答案。 - MLK.DEV

Answer 2

虽然我未能完全保留原始格式，但所需效果似乎还可以接受：

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

您可以尝试使用这个演示文稿。

- CapelliC