bằng cách sử dụng thẻ <set> trong SVG để thay đổi vòng xoay của hình dạng

Question

Tôi đang cố gắng đặt góc xoay của hình dạng bằng cách sử dụng thẻ < set> nhưng đối với cuộc sống của tôi, tôi không thể tìm ra. Cú pháp đúng là gì?

<set id="smallGearJump" 
     attributeName="transform" attributeType="XML" type="rotate" 
     to="110 100 100" begin="1s" dur="1.7s" /> 

Chỉnh sửa: Làm rõ - Tôi đang cố gắng đặt nó ở một góc cụ thể trong một khoảng thời gian đã định, không hoạt ảnh ở đó. Tôi muốn nó nhảy từ 0 quay sang 110 (trong ví dụ trên)

Answer 1

Nếu bạn muốn hoạt ảnh chuyển từ trạng thái này sang trạng thái khác thì hãy chỉ định calcMode = "rời rạc".Ví dụ: ví dụ:

<animateTransform attributeName="transform" type="rotate" to="110 100 100" dur="1.7s" begin="1s" 
      calcMode="discrete" />  

Answer 2

Bạn cần phần tử animateTransform không phải là animate. Bạn có thể muốn sửa đổi các thuộc tính additive và fill tùy thuộc vào nhu cầu của bạn.

<animateTransform id="smallGearJump" 
       attributeName="transform" attributeType="XML" 
       type="rotate" to="110 100 100" dur="1.7s" begin="1s" 
       additive="replace" fill="freeze" /> 

Xem tài liệu tại W3C hoặc tại MDN.

Answer 3

Đây chỉ là công việc xung quanh cho câu hỏi của bạn. Tìm thấy rằng hành vi của set là, khi bạn cung cấp cho nó giá trị thuộc tính sai, nó kích hoạt sự kiện onbegin và không làm gì với phần tử. Vì vậy, bằng cách sử dụng, tôi đã đưa ra các giá trị thuộc tính sai cho thuộc tính "to". Vì vậy, lệnh thiết lập kích hoạt sự kiện bắt đầu sau 2s, nhưng không có chuyển đổi nào được áp dụng cho phần tử. Sau đó, bên trong xử lý sự kiện onbegin, tôi nhận được phần tử đích trong trường hợp này là rect với id c1. Sau đó, tôi áp dụng các chuyển đổi cần thiết cho nó. (Xoay 110 về trung tâm.)

Ngoài ra, onend được kích hoạt sau 5s. Bên trong đó, tôi kiểm tra giá trị thuộc tính fill và quyết định có hoàn nguyên phép biến đổi được áp dụng hay không.

Đây có thể là một công việc xung quanh nhưng, không có sự thỏa hiệp trong giá trị bắt đầu, giá trị thời lượng.

Cũng

<set attributeName="transform" to="200" ... /> dịch trong x dir với hành vi thiết lập

<set attributeName="transform" to="200 100" ... /> dịch 200 x dir và 100 trong y dir với bộ hành vi

Nhưng không thể tìm ra cú pháp cho xoay.

Đặt một fiddle đây http://jsfiddle.net/AA2tT/

Answer 4

tôi không thể tìm thấy một câu trả lời thỏa đáng.

cuối cùng tôi đã mã hóa nó như thế này:

• đưa các yếu tố gốc đi trong một <defs>
• làm cho hai <use> của nguyên tố này, một với sự quay bổ sung, người kia mà không
• đặt hai <use> hiển thị hoặc ẩn trong khi hoạt ảnh, theo yêu cầu

Ví dụ:

<defs> 
    <path id="example" d="..."/> 
</defs> 
<use xlink:href="#example" visibility="hidden"> 
    <set begin="0s" end="1s" attributeName="visibility" to="visible"/> 
</use> 
<use xlink:href="#example" visibility="hidden" transform="rotate(110 100 100)"> 
    <set begin="1s" end="3s" attributeName="visibility" to="visible"/> 
</use>