SVG-从中心缩放圆
我想缩放嵌入在svg中的弧。应用缩放变换时,它将朝0、0缩放。相反,我希望它从自己的中心缩放 这是密码SVG-从中心缩放圆,svg,Svg,我想缩放嵌入在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">
<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>
使用
元素并设置“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>
不完全令人满意,因为我无法保持您原来的形状不变,但所需的效果似乎还可以:
<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>
fiddle@ProllyGeek:我想知道你是否注意到答案没有解决问题中的任何问题,从使用另一个比要求更简单的形状开始…@Capelic你说得很对,这项技术的新手需要理解这里的差异。@ProllyGeek问题是如何制作缩放动画,而不是半径动画。实际上,圆圈的视觉效果是一样的,但这个概念应用于其他元素的含义却大不相同。这不应该被选为正确答案。