SVG-从中心开始的刻度圈 [英] SVG - scale circle from center
本文介绍了SVG-从中心开始的刻度圈的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想缩放嵌入在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屋!
查看全文