SVG 애니메이션 시작 (2)
18092 단어 svg
Usage context
Categories
Value
Animatable
Normative document
Animation timing attribute
No
SVG 1.1 (2nd Edition)
Each value from the
<begin-value-list> can be one of the following: A
Clock-value that represents a point in time relative to the beginning of the SVG document (usually the
load or DOMReady event). Negative values are valid.Describes a
syncbase and an optional offset from that
syncbase. The element's animation start time is defined relative to the begin or active end of another animation. A
syncbase consists of an ID reference to another animation element followed by either
.begin or .end to identify whether to synchronize with the beginning or active end of the referenced animation element.Describes an event and an optional offset that determines the time at which the element's animation should begin. The animation start time is defined relative to the time that the specified event is fired. A valid event-value consists of an element ID followed by a dot and one of the supported events for that element. All the valid events (not necessarily supported by all elements) are:
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 and repeatEvent .Describes a qualified repeat event. The element animation start time is defined relative to the time that the repeat event is raised with the specified iteration value.
Describes an
accessKey that should trigger the animation. The element animation will begin when the user presses the specified key.Describes the animation start time as a real-world clock time. The time syntax is based upon the syntax defined in ISO8601.
Examples
Offset example
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="10" y="35" height="15" width="0">
<animate attributeType="XML"
attributeName="width"
to="100"
dur="8s"
begin="0s"
fill="freeze" />
</rect>
<rect x="35" y="60" height="15" width="0">
<animate attributeType="XML"
attributeName="width"
to="75"
dur="6s"
begin="2s"
fill="freeze" />
</rect>
<rect x="60" y="85" height="15" width="0">
<animate attributeType="XML"
attributeName="width"
to="50"
dur="4s"
begin="4s"
fill="freeze" />
</rect>
<!-- steps -->
<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 example
<?xml version="1.0"?>
<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">
<rect x="10" y="35" height="15" width="0">
<animate id="first"
attributeType="XML"
attributeName="width"
to="50"
dur="4s"
begin="0s;third.end" />
</rect>
<rect x="60" y="60" height="15" width="0">
<animate id="second"
attributeType="XML"
attributeName="width"
to="25"
dur="2s"
begin="first.end" />
</rect>
<rect x="85" y="85" height="15" width="0">
<animate id="third"
attributeType="XML"
attributeName="width"
to="25"
dur="2s"
begin="second.end" />
</rect>
<!-- steps -->
<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 example
<?xml version="1.0"?>
<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">
<rect x="10" y="35" height="15" width="0">
<animate begin="startButton.click"
attributeType="XML"
attributeName="width"
from="0"
to="100"
dur="8s"
fill="freeze" />
</rect>
<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>
<!-- steps -->
<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 example
<?xml version="1.0"?>
<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">
<rect x="10" y="35" height="15" width="0">
<animate id="myLoop"
begin="0s;myLoop.end"
attributeType="XML"
attributeName="width"
from="0"
to="100"
dur="4s"
repeatCount="3" />
<set begin="myLoop.begin"
attributeType="CSS"
attributeName="fill"
to="green" />
<set begin="myLoop.repeat(1)"
attributeType="CSS"
attributeName="fill"
to="gold" />
<set begin="myLoop.repeat(2)"
attributeType="CSS"
attributeName="fill"
to="red" />
</rect>
<!-- steps -->
<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 example
<?xml version="1.0"?>
<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">
<rect x="10" y="35" height="15" width="0">
<animate begin="accessKey(s)"
attributeType="XML"
attributeName="width"
from="0"
to="100"
dur="8s"
fill="freeze" />
</rect>
<text x="60" y="80" text-anchor="middle"
style="pointer-events:none;">Hit the "s" key</text>
<!-- steps -->
<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
Elements
The following elements can use the
begin attribute: 원문:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/begin
본문: SVG 애니메이션 시작 (2)
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
SVG로 간단한 로고 생성 공유오늘 저는 SVG로 만든 간단한 로고를 공유하고 싶습니다. 몇 줄의 코드만으로 쉽게 사용자 지정할 수 있고 휴대성이 뛰어난 멋진 로고를 만들 수 있습니다. 따라서 처음부터 시작하거나 현재 로고를 업데이트하려는 경우 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
