Question

我有一个svg图形，中心点位于（100,100）。

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

它无法正常工作，脉冲从中间开始，但向下移动，同时放大。有人知道怎么做吗？提前致谢。 （我查了几篇其他帖子，但它没有帮助我）

Answer 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

Answer 2

尝试在Adobe Illustrator中创建图形，中心位于x =“10”，y =“15”，宽度，高度= 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">

make for it defs block并使用它。添加比例效果（现在来自中心）

<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)"/>

SVG - 重复中心的比例路径（脉动）

2 个答案: