Question

我正在尝试根据一系列SVG文件创建一些2D动画。

所有SVG文件具有相同数量的元素，并且所有相应的元素均具有相同的元素ID。我想创建一个动画，其中每个svg都被视为关键帧，并且通过在关键帧之间插入具有相同id的元素来制作动画。

我已经研究过使用snap.svg，但是不确定如何在不同的svg文件之间链接对象。

Answer 1

这就是我要做的：

我准备了一个svg根元素，并在其中一个另外一个svg元素的顶部，每个元素都带有id。
在CSS中，我要添加以下内容：除非svg元素的目标是display: none;

svg > svg:not(:target) {
        display: none;
}

假设您的svg文件为：https://domain/.../rects.svg，如果要定位一个svg元素，则可以使用svg的id，如下所示：https://domain/.../rects.svg#svg_id

这是根svg的样子：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px" viewBox="-50 -50 100 100">
  <defs>
   <rect id="theRect" x="-30" y="-30" width="60" height="60" fill="none" stroke="red"></rect> 
  </defs>
  <style type="text/css">
 <![CDATA[  
    svg > svg:not(:target) {
    display: none;
    }
     ]]> 
</style>


<svg viewBox="-50 -50 100 100" x="-50" y="-50" id="_0">
    <use xlink:href="#theRect" transform="rotate(0)"></use>
</svg>
<svg viewBox="-50 -50 100 100" x="-50" y="-50" id="_1">
    <use xlink:href="#theRect" transform="rotate(6)"></use>
</svg>
<svg viewBox="-50 -50 100 100" x="-50" y="-50" id="_2">
    <use xlink:href="#theRect" transform="rotate(12)"></use>
</svg>
<svg viewBox="-50 -50 100 100" x="-50" y="-50" id="_3">
    <use xlink:href="#theRect" transform="rotate(18)"></use>
</svg>
<svg viewBox="-50 -50 100 100" x="-50" y="-50" id="_4">
    <use xlink:href="#theRect" transform="rotate(24)"></use>
</svg>
<svg viewBox="-50 -50 100 100" x="-50" y="-50" id="_5">
    <use xlink:href="#theRect" transform="rotate(30)"></use>
</svg>
<svg viewBox="-50 -50 100 100" x="-50" y="-50" id="_6">
  <use xlink:href="#theRect" transform="rotate(36)"></use>
</svg>
<svg viewBox="-50 -50 100 100" x="-50" y="-50" id="_7">
    <use xlink:href="#theRect" transform="rotate(42)"></use>
</svg>
<svg viewBox="-50 -50 100 100" x="-50" y="-50" id="_8">
    <use xlink:href="#theRect" transform="rotate(48)"></use>
</svg>
<svg viewBox="-50 -50 100 100" x="-50" y="-50" id="_9">
    <use xlink:href="#theRect" transform="rotate(54)"></use>
</svg>
<svg viewBox="-50 -50 100 100" x="-50" y="-50" id="_10">
    <use xlink:href="#theRect" transform="rotate(60)"></use>
</svg>
<svg viewBox="-50 -50 100 100" x="-50" y="-50" id="_11">
  <use xlink:href="#theRect" transform="rotate(66)"></use>
</svg>
<svg viewBox="-50 -50 100 100" x="-50" y="-50" id="_12">
    <use xlink:href="#theRect" transform="rotate(72)"></use>
</svg>
<svg viewBox="-50 -50 100 100" x="-50" y="-50" id="_13">
    <use xlink:href="#theRect" transform="rotate(78)"></use>
</svg>
<svg viewBox="-50 -50 100 100" x="-50" y="-50" id="_14">
  <use xlink:href="#theRect" transform="rotate(84)"></use>
</svg>
</svg>

这就是我制作动画的方式：

let i = 0; 
function Frame(){
  let n = i % 15;
  requestAnimationFrame(Frame);
  theImg.setAttribute("src", `https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/rects.svg#_${n}`);
  i++
 }

Frame()

img{border:10px solid #d9d9d9}

<img id="theImg" width="100" height="100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/rects.svg#_0" />

粗略地说，由于所有这些svg元素都在同一个文件中，因此您将无法多次使用相同的id。您将需要唯一的id。

如何从具有相同元素ID的SVG序列中创建动画

1 个答案: