Question

<svg id="background" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 635">
  <defs>
    <style>
      #mov-bg { fill: #800080; }
      #green-bg {fill: #008000;}
      #yellow-bg { fill:#ffd700 ; }
    </style>
  </defs>
  <polygon id="yellow-bg" points="0 0 172.77 0 1366 0 1366 635 0 635 0 0">
    <animate id="background3" begin="background2.end" fill="freeze" attributeName="points" dur="1"
             to="0 0 170 44 302 462 1366 635 0 635 0 0"/>
  </polygon>
  <polygon id="green-bg"  points="0 0 172.77 0 1366 0 1366 635 0 635 0 0">
    <animate id="background2"  begin="background-animate.end" fill="freeze" attributeName="points" dur="1"
             to="0 0 135.62 69.6 260.11 498.58 1366 635 0 635 0 0"/>
  </polygon>
  <polygon  id="mov-bg"  points="0 0 172.77 0 1366 0 1366 635 0 635 0 0">
    <animate id="background-animate"  begin="click" fill="freeze" attributeName="points" dur="1"
             to="0 0 83.12 78.6 207.61 531.58 1366 635 0 635 0 0"/>
  </polygon>
</svg>

有3种背景应该一个一个地动画。当id =“ background-animate”结束时，我希望id =“ background2”开始，依此类推但它不起作用。

Answer 1

在SMIL中，负号是一个特殊字符，因为其默认含义是减法运算符，即您可以编写id-1。因此，如果您的ID带有-号，则需要转义-号。尽管在Firefox中，转义未在某些浏览器中正确实现。因此，我们进行了纠正。

<svg id="background" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 635">
  <defs>
    <style>
      #mov-bg { fill: #800080; }
      #green-bg {fill: #008000;}
      #yellow-bg { fill:#ffd700 ; }
    </style>
  </defs>
  <polygon id="yellow-bg" points="0 0 172.77 0 1366 0 1366 635 0 635 0 0">
    <animate id="background3" begin="background2.end" fill="freeze" attributeName="points" dur="1"
             to="0 0 170 44 302 462 1366 635 0 635 0 0"/>
  </polygon>
  <polygon id="green-bg"  points="0 0 172.77 0 1366 0 1366 635 0 635 0 0">
    <animate id="background2"  begin="background\-animate.end" fill="freeze" attributeName="points" dur="1"
             to="0 0 135.62 69.6 260.11 498.58 1366 635 0 635 0 0"/>
  </polygon>
  <polygon  id="mov-bg"  points="0 0 172.77 0 1366 0 1366 635 0 635 0 0">
    <animate id="background-animate"  begin="click" fill="freeze" attributeName="points" dur="1"
             to="0 0 83.12 78.6 207.61 531.58 1366 635 0 635 0 0"/>
  </polygon>
</svg>

svg动画在另一端不起作用

1 个答案: