SVG - 从中心缩放圆圈答案

【问题标题】：SVG - scale circle from centerSVG - 从中心缩放圆圈
【发布时间】：2012-07-16 02:35:47
【问题描述】：

我想缩放嵌入在 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>

【问题讨论】：

标签： svg

【解决方案1】：

不完全令人满意，因为我一直无法保持你原来的形状不变，但所需的效果似乎还可以：

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

你可以试试thisfiddle

【讨论】：

【解决方案2】：

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

【讨论】：

@ProllyGeek：不知道您是否注意到答案没有解决问题中的任何问题，从使用另一个开始，比要求的更简单，形状...
@CapelliC 你说得对，这项技术的新手需要了解这里的差异。@ProllyGeek 问题是如何为比例设置动画，而不是半径。虽然实际上圆的视觉效果相同，但这个概念应用于其他元素的含义却大不相同。这不应被选为正确答案。