2

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

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

一条路径（像一个圆圈）应该围绕它并跳动 - 我的意思是，它应该从 0 缩放到一个 value，集中在点 (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>

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

4

2 回答 2

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

示例小提琴

于 2013-11-02T14:16:42.230 回答
0

尝试在 Adob​​e 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)"/>
于 2015-04-26T20:31:03.597 回答