html - SVG 微调器动画

Question

我目前正在为 spinner.svg 图形制作动画，但我没有让动画正常工作。这是我当前的代码，效果很好，但是转了一圈后，动画不再同步了……我找不到问题所在……

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g>
<g id="spinner">

<g id="1">
<path opacity="0.2" d="M16.3815,8.97584C16.3815,8.93178 16.3458,8.89607 16.3018,8.89607L15.6982,8.89607C15.6542,8.89607 15.6185,8.93178 15.6185,8.97584L15.6185,12.8143C15.6185,12.8583 15.6542,12.8941 15.6982,12.8941L16.3018,12.8941C16.3458,12.8941 16.3815,12.8583 16.3815,12.8143L16.3815,8.97584Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0s" />
</path>
</g>

<g id="2">
<path opacity="0.2" d="M19.8425,10.1077C19.8645,10.0695 19.8515,10.0207 19.8133,9.9987L19.2906,9.69693C19.2525,9.6749 19.2037,9.68797 19.1817,9.72613L17.2624,13.0503C17.2404,13.0885 17.2535,13.1373 17.2916,13.1593L17.8143,13.4611C17.8525,13.4831 17.9013,13.47 17.9233,13.4319L19.8425,10.1077Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.1333s" />   
</path>
</g>

<g id="3">
<path opacity="0.2" d="M22.2739,12.8183C22.312,12.7963 22.3251,12.7475 22.3031,12.7094L22.0013,12.1867C21.9793,12.1485 21.9305,12.1355 21.8923,12.1575L18.5681,14.0767C18.53,14.0987 18.5169,14.1475 18.5389,14.1857L18.8407,14.7084C18.8627,14.7465 18.9115,14.7596 18.9497,14.7376L22.2739,12.8183Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.2666s" />   
</path>
</g>

<g id="4">
<path opacity="0.2" d="M23.0242,16.3815C23.0682,16.3815 23.1039,16.3458 23.1039,16.3018L23.1039,15.6982C23.1039,15.6542 23.0682,15.6185 23.0242,15.6185L19.1857,15.6185C19.1417,15.6185 19.1059,15.6542 19.1059,15.6982L19.1059,16.3018C19.1059,16.3458 19.1417,16.3815 19.1857,16.3815L23.0242,16.3815Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.4s" />   
</path>
</g>

<g id="5">
<path opacity="0.2" d="M21.8923,19.8425C21.9305,19.8645 21.9793,19.8515 22.0013,19.8133L22.3031,19.2906C22.3251,19.2525 22.312,19.2037 22.2739,19.1817L18.9497,17.2624C18.9115,17.2404 18.8627,17.2535 18.8407,17.2916L18.5389,17.8143C18.5169,17.8525 18.53,17.9013 18.5681,17.9233L21.8923,19.8425Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.5333s" />   
</path>
</g>

<g id="6">
<path opacity="0.2" d="M19.1817,22.2739C19.2037,22.312 19.2525,22.3251 19.2906,22.3031L19.8133,22.0013C19.8515,21.9793 19.8645,21.9305 19.8425,21.8923L17.9233,18.5681C17.9013,18.53 17.8525,18.5169 17.8143,18.5389L17.2916,18.8407C17.2535,18.8627 17.2404,18.9115 17.2624,18.9497L19.1817,22.2739Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.6666s" />   
</path>
</g>

<g id="7">
<path opacity="0.2" d="M15.6185,23.0242C15.6185,23.0682 15.6542,23.1039 15.6982,23.1039L16.3018,23.1039C16.3458,23.1039 16.3815,23.0682 16.3815,23.0242L16.3815,19.1857C16.3815,19.1417 16.3458,19.1059 16.3018,19.1059L15.6982,19.1059C15.6542,19.1059 15.6185,19.1417 15.6185,19.1857L15.6185,23.0242Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.8s" />   
</path>
</g>

<g id="8">
<path opacity="0.2" d="M12.1575,21.8923C12.1355,21.9305 12.1485,21.9793 12.1867,22.0013L12.7094,22.3031C12.7475,22.3251 12.7963,22.312 12.8183,22.2739L14.7376,18.9497C14.7596,18.9115 14.7465,18.8627 14.7084,18.8407L14.1857,18.5389C14.1475,18.5169 14.0987,18.53 14.0767,18.5681L12.1575,21.8923Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.9333s" />   
</path>
</g>

<g id="9">
<path opacity="0.2" d="M9.72613,19.1817C9.68797,19.2037 9.6749,19.2525 9.69693,19.2906L9.9987,19.8133C10.0207,19.8515 10.0695,19.8645 10.1077,19.8425L13.4319,17.9233C13.47,17.9013 13.4831,17.8525 13.4611,17.8143L13.1593,17.2916C13.1373,17.2535 13.0885,17.2404 13.0503,17.2624L9.72613,19.1817Z" style="fill:black;">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="1.0666s" />    
</path>
</g>

<g id="10">
<path opacity="0.2" d="M8.97584,15.6185C8.93178,15.6185 8.89607,15.6542 8.89607,15.6982L8.89607,16.3018C8.89607,16.3458 8.93178,16.3815 8.97584,16.3815L12.8143,16.3815C12.8583,16.3815 12.8941,16.3458 12.8941,16.3018L12.8941,15.6982C12.8941,15.6542 12.8583,15.6185 12.8143,15.6185L8.97584,15.6185Z" style="fill:black;">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="1.1999s" />      
</path>
</g>

<g id="11">
<path opacity="0.2" d="M10.1077,12.1575C10.0695,12.1355 10.0207,12.1485 9.9987,12.1867L9.69693,12.7094C9.6749,12.7475 9.68797,12.7963 9.72613,12.8183L13.0503,14.7376C13.0885,14.7596 13.1373,14.7465 13.1593,14.7084L13.4611,14.1857C13.4831,14.1475 13.47,14.0987 13.4319,14.0767L10.1077,12.1575Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="1.3332s" />     
</path>
</g>

<g id="12">
<path opacity="0.2" d="M12.8183,9.72613C12.7963,9.68797 12.7475,9.6749 12.7094,9.69693L12.1867,9.9987C12.1485,10.0207 12.1355,10.0695 12.1575,10.1077L14.0767,13.4319C14.0987,13.47 14.1475,13.4831 14.1857,13.4611L14.7084,13.1593C14.7465,13.1373 14.7596,13.0885 14.7376,13.0503L12.8183,9.72613Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="1.4665s" />     
</path>
</g>
</g>
</g>
</svg>

也许你们中的某些人可以找到我没有看到的错误:/- 谢谢!

Answer 1

您的动画持续时间似乎不正确:将其更改为 1.6 看起来更好。
或者您可以将 begin 的步长更改为 0.1

1.6/12=0.13333
1.2/12=0.1

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g>
<g id="spinner">

<g id="1">
<path opacity="0.2" d="M16.3815,8.97584C16.3815,8.93178 16.3458,8.89607 16.3018,8.89607L15.6982,8.89607C15.6542,8.89607 15.6185,8.93178 15.6185,8.97584L15.6185,12.8143C15.6185,12.8583 15.6542,12.8941 15.6982,12.8941L16.3018,12.8941C16.3458,12.8941 16.3815,12.8583 16.3815,12.8143L16.3815,8.97584Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="0s" />
</path>
</g>

<g id="2">
<path opacity="0.2" d="M19.8425,10.1077C19.8645,10.0695 19.8515,10.0207 19.8133,9.9987L19.2906,9.69693C19.2525,9.6749 19.2037,9.68797 19.1817,9.72613L17.2624,13.0503C17.2404,13.0885 17.2535,13.1373 17.2916,13.1593L17.8143,13.4611C17.8525,13.4831 17.9013,13.47 17.9233,13.4319L19.8425,10.1077Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="0.1333s" />   
</path>
</g>

<g id="3">
<path opacity="0.2" d="M22.2739,12.8183C22.312,12.7963 22.3251,12.7475 22.3031,12.7094L22.0013,12.1867C21.9793,12.1485 21.9305,12.1355 21.8923,12.1575L18.5681,14.0767C18.53,14.0987 18.5169,14.1475 18.5389,14.1857L18.8407,14.7084C18.8627,14.7465 18.9115,14.7596 18.9497,14.7376L22.2739,12.8183Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="0.2666s" />   
</path>
</g>

<g id="4">
<path opacity="0.2" d="M23.0242,16.3815C23.0682,16.3815 23.1039,16.3458 23.1039,16.3018L23.1039,15.6982C23.1039,15.6542 23.0682,15.6185 23.0242,15.6185L19.1857,15.6185C19.1417,15.6185 19.1059,15.6542 19.1059,15.6982L19.1059,16.3018C19.1059,16.3458 19.1417,16.3815 19.1857,16.3815L23.0242,16.3815Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="0.4s" />   
</path>
</g>

<g id="5">
<path opacity="0.2" d="M21.8923,19.8425C21.9305,19.8645 21.9793,19.8515 22.0013,19.8133L22.3031,19.2906C22.3251,19.2525 22.312,19.2037 22.2739,19.1817L18.9497,17.2624C18.9115,17.2404 18.8627,17.2535 18.8407,17.2916L18.5389,17.8143C18.5169,17.8525 18.53,17.9013 18.5681,17.9233L21.8923,19.8425Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="0.5333s" />   
</path>
</g>

<g id="6">
<path opacity="0.2" d="M19.1817,22.2739C19.2037,22.312 19.2525,22.3251 19.2906,22.3031L19.8133,22.0013C19.8515,21.9793 19.8645,21.9305 19.8425,21.8923L17.9233,18.5681C17.9013,18.53 17.8525,18.5169 17.8143,18.5389L17.2916,18.8407C17.2535,18.8627 17.2404,18.9115 17.2624,18.9497L19.1817,22.2739Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="0.6666s" />   
</path>
</g>

<g id="7">
<path opacity="0.2" d="M15.6185,23.0242C15.6185,23.0682 15.6542,23.1039 15.6982,23.1039L16.3018,23.1039C16.3458,23.1039 16.3815,23.0682 16.3815,23.0242L16.3815,19.1857C16.3815,19.1417 16.3458,19.1059 16.3018,19.1059L15.6982,19.1059C15.6542,19.1059 15.6185,19.1417 15.6185,19.1857L15.6185,23.0242Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="0.8s" />   
</path>
</g>

<g id="8">
<path opacity="0.2" d="M12.1575,21.8923C12.1355,21.9305 12.1485,21.9793 12.1867,22.0013L12.7094,22.3031C12.7475,22.3251 12.7963,22.312 12.8183,22.2739L14.7376,18.9497C14.7596,18.9115 14.7465,18.8627 14.7084,18.8407L14.1857,18.5389C14.1475,18.5169 14.0987,18.53 14.0767,18.5681L12.1575,21.8923Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="0.9333s" />   
</path>
</g>

<g id="9">
<path opacity="0.2" d="M9.72613,19.1817C9.68797,19.2037 9.6749,19.2525 9.69693,19.2906L9.9987,19.8133C10.0207,19.8515 10.0695,19.8645 10.1077,19.8425L13.4319,17.9233C13.47,17.9013 13.4831,17.8525 13.4611,17.8143L13.1593,17.2916C13.1373,17.2535 13.0885,17.2404 13.0503,17.2624L9.72613,19.1817Z" style="fill:black;">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="1.0666s" />    
</path>
</g>

<g id="10">
<path opacity="0.2" d="M8.97584,15.6185C8.93178,15.6185 8.89607,15.6542 8.89607,15.6982L8.89607,16.3018C8.89607,16.3458 8.93178,16.3815 8.97584,16.3815L12.8143,16.3815C12.8583,16.3815 12.8941,16.3458 12.8941,16.3018L12.8941,15.6982C12.8941,15.6542 12.8583,15.6185 12.8143,15.6185L8.97584,15.6185Z" style="fill:black;">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="1.1999s" />      
</path>
</g>

<g id="11">
<path opacity="0.2" d="M10.1077,12.1575C10.0695,12.1355 10.0207,12.1485 9.9987,12.1867L9.69693,12.7094C9.6749,12.7475 9.68797,12.7963 9.72613,12.8183L13.0503,14.7376C13.0885,14.7596 13.1373,14.7465 13.1593,14.7084L13.4611,14.1857C13.4831,14.1475 13.47,14.0987 13.4319,14.0767L10.1077,12.1575Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="1.3332s" />     
</path>
</g>

<g id="12">
<path opacity="0.2" d="M12.8183,9.72613C12.7963,9.68797 12.7475,9.6749 12.7094,9.69693L12.1867,9.9987C12.1485,10.0207 12.1355,10.0695 12.1575,10.1077L14.0767,13.4319C14.0987,13.47 14.1475,13.4831 14.1857,13.4611L14.7084,13.1593C14.7465,13.1373 14.7596,13.0885 14.7376,13.0503L12.8183,9.72613Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="1.4665s" />     
</path>
</g>
</g>
</g>
</svg>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g>
<g id="spinner">

<g id="1">
<path opacity="0.2" d="M16.3815,8.97584C16.3815,8.93178 16.3458,8.89607 16.3018,8.89607L15.6982,8.89607C15.6542,8.89607 15.6185,8.93178 15.6185,8.97584L15.6185,12.8143C15.6185,12.8583 15.6542,12.8941 15.6982,12.8941L16.3018,12.8941C16.3458,12.8941 16.3815,12.8583 16.3815,12.8143L16.3815,8.97584Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0s" />
</path>
</g>

<g id="2">
<path opacity="0.2" d="M19.8425,10.1077C19.8645,10.0695 19.8515,10.0207 19.8133,9.9987L19.2906,9.69693C19.2525,9.6749 19.2037,9.68797 19.1817,9.72613L17.2624,13.0503C17.2404,13.0885 17.2535,13.1373 17.2916,13.1593L17.8143,13.4611C17.8525,13.4831 17.9013,13.47 17.9233,13.4319L19.8425,10.1077Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.1s" />   
</path>
</g>

<g id="3">
<path opacity="0.2" d="M22.2739,12.8183C22.312,12.7963 22.3251,12.7475 22.3031,12.7094L22.0013,12.1867C21.9793,12.1485 21.9305,12.1355 21.8923,12.1575L18.5681,14.0767C18.53,14.0987 18.5169,14.1475 18.5389,14.1857L18.8407,14.7084C18.8627,14.7465 18.9115,14.7596 18.9497,14.7376L22.2739,12.8183Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.2s" />   
</path>
</g>

<g id="4">
<path opacity="0.2" d="M23.0242,16.3815C23.0682,16.3815 23.1039,16.3458 23.1039,16.3018L23.1039,15.6982C23.1039,15.6542 23.0682,15.6185 23.0242,15.6185L19.1857,15.6185C19.1417,15.6185 19.1059,15.6542 19.1059,15.6982L19.1059,16.3018C19.1059,16.3458 19.1417,16.3815 19.1857,16.3815L23.0242,16.3815Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.3s" />   
</path>
</g>

<g id="5">
<path opacity="0.2" d="M21.8923,19.8425C21.9305,19.8645 21.9793,19.8515 22.0013,19.8133L22.3031,19.2906C22.3251,19.2525 22.312,19.2037 22.2739,19.1817L18.9497,17.2624C18.9115,17.2404 18.8627,17.2535 18.8407,17.2916L18.5389,17.8143C18.5169,17.8525 18.53,17.9013 18.5681,17.9233L21.8923,19.8425Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.4s" />   
</path>
</g>

<g id="6">
<path opacity="0.2" d="M19.1817,22.2739C19.2037,22.312 19.2525,22.3251 19.2906,22.3031L19.8133,22.0013C19.8515,21.9793 19.8645,21.9305 19.8425,21.8923L17.9233,18.5681C17.9013,18.53 17.8525,18.5169 17.8143,18.5389L17.2916,18.8407C17.2535,18.8627 17.2404,18.9115 17.2624,18.9497L19.1817,22.2739Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.5s" />   
</path>
</g>

<g id="7">
<path opacity="0.2" d="M15.6185,23.0242C15.6185,23.0682 15.6542,23.1039 15.6982,23.1039L16.3018,23.1039C16.3458,23.1039 16.3815,23.0682 16.3815,23.0242L16.3815,19.1857C16.3815,19.1417 16.3458,19.1059 16.3018,19.1059L15.6982,19.1059C15.6542,19.1059 15.6185,19.1417 15.6185,19.1857L15.6185,23.0242Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.6s" />   
</path>
</g>

<g id="8">
<path opacity="0.2" d="M12.1575,21.8923C12.1355,21.9305 12.1485,21.9793 12.1867,22.0013L12.7094,22.3031C12.7475,22.3251 12.7963,22.312 12.8183,22.2739L14.7376,18.9497C14.7596,18.9115 14.7465,18.8627 14.7084,18.8407L14.1857,18.5389C14.1475,18.5169 14.0987,18.53 14.0767,18.5681L12.1575,21.8923Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.7s" />   
</path>
</g>

<g id="9">
<path opacity="0.2" d="M9.72613,19.1817C9.68797,19.2037 9.6749,19.2525 9.69693,19.2906L9.9987,19.8133C10.0207,19.8515 10.0695,19.8645 10.1077,19.8425L13.4319,17.9233C13.47,17.9013 13.4831,17.8525 13.4611,17.8143L13.1593,17.2916C13.1373,17.2535 13.0885,17.2404 13.0503,17.2624L9.72613,19.1817Z" style="fill:black;">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.8s" />    
</path>
</g>

<g id="10">
<path opacity="0.2" d="M8.97584,15.6185C8.93178,15.6185 8.89607,15.6542 8.89607,15.6982L8.89607,16.3018C8.89607,16.3458 8.93178,16.3815 8.97584,16.3815L12.8143,16.3815C12.8583,16.3815 12.8941,16.3458 12.8941,16.3018L12.8941,15.6982C12.8941,15.6542 12.8583,15.6185 12.8143,15.6185L8.97584,15.6185Z" style="fill:black;">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.9s" />      
</path>
</g>

<g id="11">
<path opacity="0.2" d="M10.1077,12.1575C10.0695,12.1355 10.0207,12.1485 9.9987,12.1867L9.69693,12.7094C9.6749,12.7475 9.68797,12.7963 9.72613,12.8183L13.0503,14.7376C13.0885,14.7596 13.1373,14.7465 13.1593,14.7084L13.4611,14.1857C13.4831,14.1475 13.47,14.0987 13.4319,14.0767L10.1077,12.1575Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="1s" />     
</path>
</g>

<g id="12">
<path opacity="0.2" d="M12.8183,9.72613C12.7963,9.68797 12.7475,9.6749 12.7094,9.69693L12.1867,9.9987C12.1485,10.0207 12.1355,10.0695 12.1575,10.1077L14.0767,13.4319C14.0987,13.47 14.1475,13.4831 14.1857,13.4611L14.7084,13.1593C14.7465,13.1373 14.7596,13.0885 14.7376,13.0503L12.8183,9.72613Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="1.1s" />     
</path>
</g>
</g>
</g>
</svg>