Question

基本上使用SVG（用于定位的PHP循环除外）我只想创建一个类似于＆gt; XX＆gt;的多边形。其中每个X只是顶部和底部的线基本上是一个箭头，我已经完成了。我复制了这个多边形偏移的宽度加上沿x的几个像素。

现在我想在每个多边形上做一个不同颜色的渐变填充，它偏移约0.1秒

我通过简单地将它们全部以第一种颜色打印出来然后在相同的xy坐标位置绘制第二种颜色的相同矩形并将其宽度从0设置为正常宽度结果是沿x轴移动的渐变填充。

这几乎可以通过在不同的颜色中重新绘制每一个来实现，但是它会非常块状我希望每个多边形从左到右逐渐填充我已经看过分组，使用fill属性设置动画，使用scale属性设置animateTransform，但仍然在学习每个属性的微妙之处，可能会遗漏某些东西

我看到的问题是多边形没有设计的宽度，也许我只是错过它。

我现在可以使用矩形但只是想要一些更闪亮的东西。

你建议我检查的任何其他途径都会很棒

这是我对矩形的代码

<rect x='".($blk*$x)."' y='110' height='30' width='0' style='stroke:none; fill: #ffff00'>
                    <animate attributeName='width' attributeType='XML'
                        to='".($blk-3)."'
                        begin='".($x/15)."s'
                        dur='.5s'
                        fill='freeze'
                    />
</rect>

我使用PHP作为blk大小和x翻译

Answer 1

您可以使用animateTransform实现类似的效果，并应用缩放变换。 animateTransform适用于所有形状，包括rect元素。

不要忘记dur属性必须以前导0开头，如果它们小于1，即.5s无效且应写为0.5s

＆＃13;

<svg>
<rect x='100' y='20' height='30' width='0' style='fill: #ffff00'>
                    <animate attributeName='width' attributeType='XML'
                        to='100'
                        begin='1s'
                        dur='0.5s'
                        fill='freeze'
                    />
</rect>
<g transform='translate(100, 0)'> 
<polygon transform='scale(0, 1)'
         points='0, 110 40, 110, 40 140, 0 140'
         style='fill: #ffff00'>
                    <animateTransform attributeName='transform' 
                        type='scale'
                        to='2.5, 1'
                        begin='1s'
                        dur='0.5s'
                        fill='freeze'
                    />
</polygon>
</g>
</svg>

＆＃13;

希望在SVG中转换多边形的宽度

1 个答案: