主页 / 问题 / 565687
Accepted
IC_
Asked:2020-09-13 09:09:17 +0000 UTC2020-09-13 09:09:17 +0000 UTC

如何使用 Jquery 动画化 SVG 路径

  • 772

你需要制作 4 个独立的元素（！重要的是，当鼠标悬停在每个元素上时，动画只是针对它）。让它不依赖于屏幕尺寸，这样小部件可以由任何尺寸组成并成为父div元素（根元素，我将自己设置的尺寸，以及孩子的尺寸，填充，边距元素将自动设置）

更新程序

在回答中，他们给出了暗示，可以把它svg path作为一个普通DOM元素来控制。如何做到这一点（PS 我的对象的 svg 标签中没有一些标签，比如填充，通常每个标签都path包含一组从 Adob​​e Illustrator 保存的数字）

应该出现什么的例子

html

1 个回答

  1. Best Answer

    您可以给出id每条路径，或从通用 svg 中重用。路径动画是可能的css transform translate：

    svg {
  fill: green
}
.puzz {
  transition: all .4s
}
.puzz:hover {
  fill: red;
  transform: translate(0, -5px) scale(1.1);
}
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">
  <defs>
    <path d="M 0 0 L 0 80 L 80 80 L 80 0 Z" id="puzz" />
  </defs>
</svg>

<div class="puzzle">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
    <use x="0" y="0" xlink:href="#puzz" class="puzz" />
    <use x="90" y="0" xlink:href="#puzz" class="puzz" />
    <use x="0" y="90" xlink:href="#puzz" class="puzz" />
    <use x="90" y="90" xlink:href="#puzz" class="puzz" />
  </svg>
</div>

    use你可以问问你自己的每一个id，并亲自制作动画。

    • 7

相关问题