SVG - 从中心重复缩放路径（脉动）答案

【问题标题】：SVG - scale path from center repetitively (pulsating)SVG - 从中心重复缩放路径（脉动）
【发布时间】：2013-11-02 13:49:12
【问题描述】：

我有一个中心点位于 (100, 100) 的 svg 图形。

<g id="centre">
 <circle cx="100" cy="100" r="2"/>
</g>

一条路径（像一个圆圈）应该环绕它并跳动 - 我的意思是，它应该将自身从 0 缩放到一个值，中心化 在点 (100,100)。在执行此操作时，脉冲也应该从 opacity=0 开始，到 opacity=0.5 并返回 opacity=0。 （我不想用路径代替。）

整个过程是这样的：

<g transform="translate(100,100)">
    <g id="pulse" >
        <radialGradient id="SVGID_4_" cx="100" cy="100" r="21.2498" gradientUnits="userSpaceOnUse">
            <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
            <stop  offset="1" style="stop-color:#006837" />
        </radialGradient>
        <path opacity="0.5" fill="url(#SVGID_4_)" stroke="url(#SVGID_4_)" stroke-width="0.5" stroke-miterlimit="10" d="M120.864,99.676
            c0,11.599-9.401,21-21,21c-11.598,0-21-9.401-21-21c0-11.598,9.402-21,21-21c6.705,0,12.679,3.144,16.523,8.037
            C119.193,90.281,120.864,94.783,120.864,99.676z" />
        <animateTransform 
            attributeType="xml"
            attributeName="transform"
            type="scale"
            from="0"
            by="3"
            dur="2s" 
            fill="freeze"           
            repeatCount="indefinite"
            />  
        <animate 
            attributeType="xml" 
            attributeName="fill-opacity" 
                from="0" 
                to="0" 
                values="0;0.5;0"
            dur="2s" 
            repeatCount="indefinite" 
            fill="freeze" />            
    </g>
</g>

<g id="centre">
    <circle cx="100" cy="100" r="2"/>
</g>
</svg>

它没有按我的意愿工作，脉冲从中间开始，但向右移动，同时放大。有人知道怎么做吗？提前致谢。 （我查了其他几个帖子，但对我没有帮助）

【问题讨论】：

标签： xml svg

【解决方案1】：

scale() 转换（就像所有其他转换一样）基本上只是将所有坐标值与相应的比例因子相乘。因此，如果您的对象不在原点 (0,0) 的中心，它似乎会远离中心。

因此，简单的解决方案是，让您的对象以原点为中心，应用转换并将其移动到您想要的任何位置。

为了懒惰，我只是使用transform="translate(-100 -100)" 移动了您的路径元素。自己修改坐标也可以达到同样的效果。

<!-- the other code -->
<path d="..." opacity="0.5" fill="url(#SVGID_4_)" 
      stroke="url(#SVGID_4_)" stroke-width="0.5" stroke-miterlimit="10" 
      transform="translate(-100 -100)"/>
<!-- more other code -->

Example Fiddle

【讨论】：

【解决方案2】：

尝试在 Adobe Illustrator 中创建图形，中心在 x="10", y="15", width,height=10 并保存。您将在文本编辑器中看到下一个：

    <rect x="5" y="10" width="10" height="10" fill="black">

将图形中心的坐标从 x="10", y="15" 设置为 x=0, y=0（Adobe Illustrator 中的变换窗口）并保存。您将在文本编辑器中看到下一个：

    <rect x="-5" y="-5" width="10" height="10" fill="black">

为它制作 defs 块并使用它。添加比例效果（现在从中心开始）

<defs>
    <rect id="any_figure" x="-5" y="-4.5" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="10" height="10">
        <!--it animates scale up and scale down onclick -->
        <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.05" repeatCount="1" begin="mousedown+0.2s" dur="0.2s" fill="freeze"></animateTransform>
        <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1.05" to="1" repeatCount="1" begin="mouseup+0.4s" dur="0.2s" fill="freeze"></animateTransform>
    </rect>
</defs>
<use xlink:href="#any_figure"  transform="translate(10,15)"/>

【讨论】：