Question

我试图用css中闪闪发光的svg明星动画。

事情是动画期间星星向svg的0,0位置移动。我想这位明星在动画期间保持原位。

我猜测的是，在动画过程中不会使用制作星星（路径中）的每个点的位置。

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g>
  <rect fill="#009eff" height="351.7699" width="300.36301" class="color-fill"/>
  <path class="glittering" fill="#ffcc00" d="m270.88123,28.60792l-7.20074,6.20193l1.02679,9.44777l-8.12354,-4.93181l-8.66808,3.89605l2.18013,-9.24996l-6.38396,-7.03987l9.47093,-0.78498l4.72256,-8.24694l3.67325,8.76482l9.30264,1.94299z"/>
 </g>
</svg>

我制作了一个编码器，以便您可以看到我的意思。

codepen

你能帮我社区吗？非常感谢！

Answer 1

缩放星形时，您可以有效地将所有路径坐标乘以比例因子。由于路径坐标距离原点有一定距离，因此恒星正在移动。

您需要定义以原点为中心的星座，然后使用具有合适变换的<g>元素将星形停放在您真正想要的位置。

假设您计划在此图片中拥有多个星标，我建议您在<defs>部分中定义星形。这将使您的SVG更容易使用：

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
  <path id="star1" fill="#ffcc00" d="M0.000-10L2.939-4.05L9.511-3.09L4.755 1.55L5.878 8.09L0 5L-5.878 8.09L-4.755 1.55L-9.511 -3.09L-2.939-4.05L0-10Z"/>
  </defs>
  <g>
    <rect fill="#009eff" height="100" width="300" class="color-fill"/>
    <g transform="translate(200,30)">
      <use xlink:href="#star1" class="glittering"/>
    </g>
    <g transform="translate(100,60)">
      <use xlink:href="#star1" class="glittering"/>
    </g>
  </g>
</svg>

Updated copepen link here

SVG CSS动画明星闪闪发光，向0,0点移动

1 个答案: