begin

è¿ä¸ªå±æ§å®ä¹äºå¨ç»ä½æ¶å¼å§ã

è¿ä¸ªå±æ§å¼æ¯ä¸ä¸ªåå·åéçæ°åå¼ãSMIL è§èç"Evaluation of begin and end time lists"ç« èè¯¦ç»è§£éäºå¼å§æ¶é´æ°åãæ¯ä¸ªåç¬çå¼å¯ä»¥æ¯ä¸è¿°ä¹ä¸ï¼<offset-value>ã<syncbase-value>ã<event-value>ã<repeat-value>ã<accessKey-value>ã<wallclock-sync-value>æèå³é®è¯indefiniteã

ä½¿ç¨è¯´æ

ç±»å«	å¨ç»å®æ¶å±æ§
å¼	<begin-value-list>
å¯åæ§	No

<offset-value>: ä¸ä¸ªæ¶éå¼ä»£è¡¨äºä¸ä¸ªç¸å¯¹äº SVG ææ¡£å¼å¤´çæ¶é´ç¹ï¼SVG ææ¡£å¼å¤´éå¸¸æ¯æ load äºä»¶æè DOMReady äºä»¶è§¦åçæ¶é´ç¹ãè´å¼æ¯åæ³çã
<syncbase-value>: æè¿°ä¸ä¸ªsyncbaseä»¥åä¸ä¸ªå¯éçæ¥èªäºsyncbaseçæ¶åç§»ãåç´ çå¨ç»å¼å§æ¶é´è¢«å®ä¹ä¸ºç¸å¯¹äºå¦ä¸ä¸ªå¨ç»çå¼å¤´æèæ¿æ´»ç»æãä¸ä¸ª ID åå¶åé¢è·çç .begin æ .end ææäºä¸ä¸ª syncbaseï¼ID å¼ç¨å°å¦ä¸ä¸ªå¨ç»åç´ ï¼.begin æ .end ç¨æ¥ç¡®å®å°åºæ¯ä¸å¼ç¨çå¨ç»åç´ çå¨ç»å¼å¤´åæ¥ãè¿æ¯ä¸å¼ç¨çå¨ç»åç´ çå¨ç»æ¿æ´»ç»æåæ¥ã
<event-value>: æè¿°äºä¸ä¸ªäºä»¶ä»¥åä¸ä¸ªå¯éçæ¶åç§»ï¼ç¨æ¥ç¡®å®å¨ç»å¼å§çæ¶ç¹ãè§¦åæå®äºä»¶çæ¶ç¹ï¼è¢«å®ä¹ä¸ºå¨ç»å¼å§çæ¶ç¹ãä¸ä¸ªåç´ ID åå¶åé¢è·ççä¸ä¸ªç¹åå¶åé¢è·çäºä»¶åææäºä¸ä¸ªåæ³ç event-value å¼ãäºä»¶åå¿é¡»æ¯åç´ æ¯æçäºä»¶åãå¨é¨åæ³çäºä»¶ï¼ä¸ä¸å®æ¯ææåç´ é½æ¯æçäºä»¶ï¼åæ¬è¿äºï¼focusinãfocusoutãactivateãclickãmousedownãmouseupãmouseoverãmousemoveãmouseoutãDOMSubtreeModifiedãDOMNodeInsertedãDOMNodeRemovedãDOMNodeRemovedFromDocumentãDOMNodeInsertedIntoDocumentãDOMAttrModifiedãDOMCharacterDataModifiedãSVGLoadãSVGUnloadãSVGAbortãSVGErrorãSVGResizeãSVGScrollãSVGZoomãbeginEventãendEvent å repeatEventã
<repeat-value>: æè¿°äºä¸ä¸ªç¬¦åæ¡ä»¶éå¤äºä»¶ãrepeat äºä»¶åçäºæå®æ¬¡æ°çæ¶é´ç¹ï¼è¢«å®ä¹ä¸ºåç´ å¨ç»çå¼å§æ¶é´ç¹ã
<accessKey-value>: æè¿°äºä¸ä¸ªç¨æ¥è§¦åå¨ç»çè®¿é®é®ãå½ç¨æ·æä¸æå®çé®æ¶ï¼åç´ å¨ç»å°±å¼å§äºã
<wallclock-sync-value>: æè¿°äºä¸ä¸ªå¨ç»å¼å§æ¶é´ï¼æ¯çå®ä¸çéçæ¶ç¹ãæ¶ç¹çå¥æ³éµå® ISO8601 å®ä¹çå¥æ³ã

ç¤ºä¾

Offset ç¤ºä¾

html

<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="100"
      begin="0s"
      dur="8s"
      fill="freeze" />
  </rect>

  <rect x="35" y="60" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="75"
      begin="2s"
      dur="6s"
      fill="freeze" />
  </rect>

  <rect x="60" y="85" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="50"
      begin="4s"
      dur="4s"
      fill="freeze" />
  </rect>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
</svg>

begin-1-offset.svg

Syncbase ç¤ºä¾

html

<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="50"
      id="first"
      begin="0s;third.end"
      dur="4s" />
  </rect>

  <rect x="60" y="60" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="25"
      id="second"
      begin="first.end"
      dur="2s" />
  </rect>

  <rect x="85" y="85" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="25"
      id="third"
      begin="second.end"
      dur="2s" />
  </rect>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
</svg>

begin-2-syncbase.svg

Event ç¤ºä¾

html

<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangle -->
  <rect x="10" y="35" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      from="0"
      to="100"
      begin="startButton.click"
      dur="8s"
      fill="freeze" />
  </rect>

  <!-- trigger -->
  <rect
    id="startButton"
    style="cursor:pointer;"
    x="19.5"
    y="62.5"
    rx="5"
    height="25"
    width="80"
    fill="#EFEFEF"
    stroke="black"
    stroke-width="1" />

  <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
    Click me.
  </text>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>

begin-3-event.svg

Repeat ç¤ºä¾

html

<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangle -->
  <rect x="10" y="35" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      from="0"
      to="100"
      id="myLoop"
      begin="0s;myLoop.end"
      dur="4s"
      repeatCount="3" />

    <set
      attributeType="CSS"
      attributeName="fill"
      to="green"
      begin="myLoop.begin" />

    <set
      attributeType="CSS"
      attributeName="fill"
      to="gold"
      begin="myLoop.repeat(1)" />

    <set
      attributeType="CSS"
      attributeName="fill"
      to="red"
      begin="myLoop.repeat(2)" />
  </rect>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">1s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">2s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">3s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">4s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>

begin-4-repeat.svg

Accesskey ç¤ºä¾

html

<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      from="0"
      to="100"
      begin="accessKey(s)"
      dur="8s"
      fill="freeze" />
  </rect>

  <!-- trigger -->
  <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
    Hit the "s" key
  </text>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>

begin-5-accesskey.svg

è§è

Specification
SVG Animations Level 2 # BeginAttribute

Help improve MDN

Learn how to contribute

View this page on GitHub â¢ Report a problem with this content