Question

http://www.carto.net/papers/svg/samples/jumping_cubes.svg

（真的希望这个问题不会被关闭）

Answer 1

正如您在源代码中看到的，它使用SVG动画。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
  <!ENTITY dur "2s">
  <!ENTITY values     "0;    -45;      0;     16;      0;     -7;      0;      3;      0;     -2;      0;      1; 0">
  <!ENTITY keyTimes   "0; 0.2564; 0.5128; 0.6154; 0.6923; 0.7436; 0.7949; 0.8462; 0.8974; 0.9231; 0.9487; 0.9744; 1">
  <!ENTITY keySplines "0 .75 .5 1; .5 0 1 .25; 0 .25 .25 1; .5 0 1 .5; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1">
  <!ENTITY calcMode "spline">
  <!ENTITY begin "mouseover">
]>
<svg width="665" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 665 250" xml:space="preserve">
  <title>SVG Animation - Cube Demonstration</title>

  <!-- example originally from Antoine Quint, stolen from "Digging Animation" at http://www.xml.com/pub/a/2002/01/23/svg/index.html -->
  <!-- fixes by A. Neumann (added namespaces, changed DTD and replaced style attributes with presentation attributes -->
  <defs>
    <symbol id="cube" stroke="#000000" stroke-width="0.5" stroke-linejoin="bevel">
      <path fill="#333333" d="M0.112,26.271l25.032,12.485V25.164L0.112,12.68V26.271z"/>
      <path fill="#666666" d="M25.144,38.756l25.033-12.485H50.12V12.708L25.144,25.164V38.756z"/>
      <path fill="#cccccc" d="M50.12,12.708l0.057-0.028L25.144,0.224L0.112,12.68l25.032,12.484L50.12,12.708z"/>
    </symbol>
  </defs>

  <rect width="100%" height="100%" fill="#999999" stroke="none" />

  <g id="cubes" transform="translate(300.25, 143.45)" >
    <use xlink:href="#cube" transform="translate(0,-72)">
      <animate  dur="&dur;" values="&values;" keyTimes="&keyTimes;" keySplines="&keySplines;"
                attributeName="y" begin="&begin;" restart="whenNotActive" calcMode="&calcMode;" />
    </use>
    <use xlink:href="#cube" transform="translate(24,-60)">
      <animate  dur="&dur;" values="&values;" keyTimes="&keyTimes;" keySplines="&keySplines;"
                attributeName="y" begin="&begin;" restart="whenNotActive" calcMode="&calcMode;" />
    </use>

    <use xlink:href="#cube" transform="translate(48,-48)">
      <animate  dur="&dur;" values="&values;" keyTimes="&keyTimes;" keySplines="&keySplines;"
                attributeName="y" begin="&begin;" restart="whenNotActive" calcMode="&calcMode;" />
    </use>
    <use xlink:href="#cube" transform="translate(-24,-60)">
      <animate  dur="&dur;" values="&values;" keyTimes="&keyTimes;" keySplines="&keySplines;"
                attributeName="y" begin="&begin;" restart="whenNotActive" calcMode="&calcMode;" />
    </use>
    <use xlink:href="#cube" transform="translate(0,-48)">
      <animate  dur="&dur;" values="&values;" keyTimes="&keyTimes;" keySplines="&keySplines;"
                attributeName="y" begin="&begin;" restart="whenNotActive" calcMode="&calcMode;" />
    </use>

    <use xlink:href="#cube" transform="translate(-48,-48)">
      <animate  dur="&dur;" values="&values;" keyTimes="&keyTimes;" keySplines="&keySplines;"
                attributeName="y" begin="&begin;" restart="whenNotActive" calcMode="&calcMode;" />
    </use>
    <use xlink:href="#cube" transform="translate(24,-36)">
      <animate  dur="&dur;" values="&values;" keyTimes="&keyTimes;" keySplines="&keySplines;"
                attributeName="y" begin="&begin;" restart="whenNotActive" calcMode="&calcMode;" />
    </use>
    <use xlink:href="#cube" transform="translate(-24,-36)">
      <animate  dur="&dur;" values="&values;" keyTimes="&keyTimes;" keySplines="&keySplines;"
                attributeName="y" begin="&begin;" restart="whenNotActive" calcMode="&calcMode;" />
    </use>

    <use xlink:href="#cube" transform="translate(-72,-36)">
      <animate  dur="&dur;" values="&values;" keyTimes="&keyTimes;" keySplines="&keySplines;"
                attributeName="y" begin="&begin;" restart="whenNotActive" calcMode="&calcMode;" />
    </use>
    <use xlink:href="#cube" transform="translate(72,-36)">
      <animate  dur="&dur;" values="&values;" keyTimes="&keyTimes;" keySplines="&keySplines;"
                attributeName="y" begin="&begin;" restart="whenNotActive" calcMode="&calcMode;" />
    </use>
    <use xlink:href="#cube" transform="translate(48,-24)">
      <animate  dur="&dur;" values="&values;" keyTimes="&keyTimes;" keySplines="&keySplines;"
                attributeName="y" begin="&begin;" restart="whenNotActive" calcMode="&calcMode;" />
    </use>

    <use xlink:href="#cube" transform="translate(-48,-24)">
      <animate  dur="&dur;" values="&values;" keyTimes="&keyTimes;" keySplines="&keySplines;"
                attributeName="y" begin="&begin;" restart="whenNotActive" calcMode="&calcMode;" />
    </use>
    <use xlink:href="#cube" transform="translate(0,-24)">
      <animate  dur="&dur;" values="&values;" keyTimes="&keyTimes;" keySplines="&keySplines;"
                attributeName="y" begin="&begin;" restart="whenNotActive" calcMode="&calcMode;" />
    </use>
    <use xlink:href="#cube" transform="translate(24,-12)">
      <animate  dur="&dur;" values="&values;" keyTimes="&keyTimes;" keySplines="&keySplines;"
                attributeName="y" begin="&begin;" restart="whenNotActive" calcMode="&calcMode;" />
    </use>

    <use xlink:href="#cube" transform="translate(-24,-12)">
      <animate  dur="&dur;" values="&values;" keyTimes="&keyTimes;" keySplines="&keySplines;"
                attributeName="y" begin="&begin;" restart="whenNotActive" calcMode="&calcMode;" />
    </use>
    <use xlink:href="#cube" transform="translate(0,0)">
      <animate  dur="&dur;" values="&values;" keyTimes="&keyTimes;" keySplines="&keySplines;"
                attributeName="y" begin="&begin;" restart="whenNotActive" calcMode="&calcMode;" />
    </use>
  </g>
  <a xlink:href="http://www.xml.com/pub/a/2002/01/23/svg/index.html"><text font-size="12px" text-anchor="middle" x="332.5" y="245">Example provided by A. Quint (published in Sacré SVG column at O'Reilly), Modifications by A. Neumann</text></a>

</svg>

Answer 2

SVG已包含此类动画所需的所有数据（转场，悬停行为等）。

不需要javascript。

为什么/这个网页如何不包含任何JavaScript？

2 个答案: