cách bắt đầu hoạt ảnh khi kết thúc một hoạt ảnh khác?

Question

Tôi đang cố gắng để có một chấm mờ dần từ trắng sang đỏ và sau đó từ trắng sang đỏ.

Đây là những gì tôi có cho đến nay:

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"/> 
<animate id="testies" attributeName="fill" from="#ED1C24" 
to="#fff" xlink:href="#test" dur="2s" fill="freeze" /> 
<animate attributeName="fill" from="" to="#ED1C24" 
xlink:href="#test" begin="" onrepeat=" dur="2s" fill="freeze" /> 

Tôi muốn các hoạt hình thứ hai để bắt đầu khi người đầu tiên kết thúc, tôi biết điều này là có thể, tôi chỉ không thể tìm nó ra.

Answer 1

Sử dụng ví dụ của bạn, dưới đây là cách:

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"/> 
<animate id="testies" attributeName="fill" from="#ED1C24" to="#fff" 
    xlink:href="#test" dur="2s" fill="freeze" /> 
<animate attributeName="fill" from="" to="#ED1C24" xlink:href="#test" 
    begin="testies.end" dur="2s" fill="freeze" /> 

hoặc như một sự thay thế tương đương mà không có cú pháp xlink:href:

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"> 
    <animate id="testies" attributeName="fill" from="#ED1C24" to="#fff" 
    dur="2s" fill="freeze" /> 
    <animate attributeName="fill" from="" to="#ED1C24" 
    begin="testies.end" dur="2s" fill="freeze" /> 
</circle> 

Vì vậy, về cơ bản chỉ cần thêm id của phần tử mà bạn muốn kích hoạt hoạt ảnh khác từ và thêm hậu tố ".end". Bạn cũng có thể chỉ định ".begin" để kích hoạt khi bắt đầu hoạt ảnh hoặc thêm thời gian bù đắp, ví dụ: begin="someId.end+2s".

Cũng có thể sử dụng sự kiện để kích hoạt hoạt ảnh, cú pháp tương tự: id theo sau là dấu chấm và sau đó là tên của sự kiện và tùy chọn bù thời gian. Xem danh sách các sự kiện được yêu cầu trong SVG 1.1 here (cột ngoài cùng bên trái có gắn nhãn "Tên sự kiện" là những gì được áp dụng tại đây).

Nếu bạn không sợ thông số kỹ thuật, hãy xem full syntax of the begin attribute để biết tất cả chi tiết.