SVG-从中心开始的刻度圈 [英] SVG - scale circle from center

问题描述

我想缩放嵌入在svg中的弧.在应用比例变换时，它朝着0，0缩放.相反，我希望它从自己的角度缩放到中心.

I want to scale my arc that is embedded in svg. While apply scale transform, it is scaled towards 0, 0. Instead of that, i want it to be scaled center from it's own.

这是代码

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

推荐答案

不能完全令人满意，因为我无法保持您原来的形状不变，但是所需的效果似乎还可以:

Not entirely satisfactory, because I've been unable to leave unchanged your original shape, but the effect required seems 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>

您可以尝试此小提琴

这篇关于SVG-从中心开始的刻度圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！