почему мой SVG-элемент неправильно следует своему пути?

#html #css #animation #svg

#HTML #css #Анимация #svg

Вопрос:

Я создал веб-дизайн с помощью Illustrator, скопировал его в Figma и экспортировал как SVG.

Я хотел, чтобы бумажная плоскость (#moveplane) перемещалась вдоль пунктирной линии, поэтому я нарисовал линию той же формы, что и пунктирная линия, импортировал ее как SVG и скопировал путь, по которому должна следовать плоскость. Но плоскость отклоняется от линии, она либо слишком далеко справа, либо совсем далеко.

Мне было интересно, в чем может быть проблема?

Чтобы дать вам лучшее представление, это мой Codepen — https://codepen.io/gelaciojica/pen/MWydLNm

 #moveplane{
  motion-path: path("M264 105.5C313.833 82.5 425.8 39.1 475 49.5C496.013 53.9418 517.669 64.5128 535 79.5575M535 79.5575C568.392 108.544 585.733 154.139 551.5 204.5C491.5 253.5 345 126.615 535 79.5575ZM535 79.5575C607.333 63.3716 742 71 792.5 184.5C821.5 275 786 286.5 792.5 325C796.5 377.5 822.9 412.7 840.5 421.5");

  offset-path: path("M0.5 70.5C50.3333 47.5 133 -7.50001 242 1.58255C263.403 3.36603 284.669 16.5954 302 31.64M302 31.64C335.392 60.6268 352.733 106.221 318.5 156.583C258.5 205.583 112 78.6975 302 31.64ZM302 31.64C374.333 15.4542 509 23.0826 559.5 136.583C588.5 227.083 553 238.583 559.5 277.083C563.5 329.583 589.9 364.783 607.5 373.583");
  
  animation: move 4s linear ;
   
}
@keyframes move {
  100% { 
    motion-offset: 100%;
    offset-distance: 100%;
  }
}
}
  

и это единственная часть, которую я отредактировал в SVG-файле.

Комментарии:

1. Можно ли немного упростить его и удалить изображения и SVG, которые не являются частью проблемы?

2. Проблема уже в том фрагменте, который я опубликовал.

Ответ №1:

Я бы предложил использовать <animateMotion> вместо этого.

Также вы можете нарисовать равнину в виде svg-группы элементов или символа. Я бы не стал использовать изображение.

Чтобы отладить код, сделайте видимым путь, по которому будет следовать равнина.

Также убедитесь, что центр равнины находится в точке x: 0, y: 0. Чтобы сделать это, я применил преобразование к изображению.

 body{background:black}  
 <svg viewBox="0 0 1080 720" fill="none">

  <path id="path" stroke="red" stroke-width="5" d="M264 105.5C313.833 82.5 425.8 39.1 475 49.5C496.013 53.9418 517.669 64.5128 535 79.5575M535 79.5575C568.392 108.544 585.733 154.139 551.5 204.5C491.5 253.5 345 126.615 535 79.5575ZM535 79.5575C607.333 63.3716 742 71 792.5 184.5C821.5 275 786 286.5 792.5 325C796.5 377.5 822.9 412.7 840.5 421.5" />

  <image id="image0" width="256" height="256" x="-128" y="-128" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH5AkeBjYL5pSFpgAAKv1JREFUeNrtnXm4ZVV14H9rn3OnN9VMFRQUxaSoUVHEmSiCglGTgIJDPuNniIlJ2nRGjUkn6aS7k452d/pL yVR0aQ7JiJClVE7aqLYDqggIDKIKFAjVDEWRdWb7j1nr/5jn33vuZdXVW 4b6z1 yjeq3frnXvOuWftNa8NhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhmEYhjFPyGKfgGEYs0d3b4NTLg1/eeALMHCSkNQVFPIJZO3zjvr7tgAYxjJCd20LUqsZuAHQSUFSYdVzhOGtHlB8C1wFkWOLty0AhrGE0V2fAXJwAk4hF0AdJEJjk2fyUQWBfBJ8y7Hq6ZtxyYNATj6JrHvBUY fLvYFGobRje79Z/A5VEeg SQgguLIBSTNOfkNHoD/IvDa9wyz5tzNDD3tXGrr344kH4Pk0 AdJP5Y72UWgGEsAXTPdvAKeQppTtDyOEBxmtM8BAikww1aT56GuNOprjuL sbnURk5D1c7G5EP4P37wDuShpfBE4/5vrYAGMYioLu2BbN vAmDNci9EAReCOa7ko8CCvUTN5GNvgDNn0FS20h13QZqG84gHXwGkqxG1YF BEl Gd9MkCTHJdA6jKw  6jnYQuAYSwQQeiBRCFzdGn5yfGc4c2w8RUweUh45GvPQicvwufnIDJEOtKivqlBdfVpSHom6ADqcyAB/gX1b0CSEP0v/ifDpx7znGwBMIx5QndeDa4GLoM8AaGk5TUHUaQiSKpAA22ej ZvQPMXgAquvof6pkPUTzgJV3026k9Cc4J8SwuoALcBr0TkYLAEKPz FjJ85jHP0RYAw gjumdbEMFJgZqC0NHyic RVdAaCz9yfjPoa1G9DM3PBT OpN ndsL9NDavJqm9APXPQPOkEPoY1FOC5n8AOB/YUfw9h lp/ogtAIYxR3T3deArkIyDVsq vKetkRWEKuqeC/w0cBn4Z6L5k C RXXtbQxsqZIOvAD156F5o2POiy8dU4uvo8CFwI2UhB8FGbEFwDDmjXYxTiWDVgrhbwmgeJfjUnBNcB4ytwk4H SngdeBX4P6Jug3SUe yeDWnMrI81H9STRf014vkJyO0LffuvjjgEuBzxBS Vl4OUGGT57RtdgCYBjHQHdtAwRcDlkVkkzCD4g dynfLlXQZwMXgrweeDFoBc09 G/jGl9hcOtBquvCv9H8lB6hj8ediowg8O8BPhS 1wwk/Dc0fc3fPtvFvrmGsRTRvZ8Gn4RUnQ9BdYKWBzRDffirCjg2gp4PvBq4COR0UFAPmt Kq3yJgVP2Ud90JrgLg nvpeTXR61 NHmMwv9B4L1AikiGD4WAM/H7y9gCYBiA7v8SNEeJ2hTVI2h5BaWCyE8AFxV/XgSyClRBBc3vBvcl6hvvZ CUTbjqK9H8PNRXCqHX4njHEvpIFP5PorytCCxGd2DWws8039wwViS6e1vx3WFgCCin6aTIt2mQa5H1wMuBS4BXAGeBBL8fL2i E/g3qmvvZGDrEOnAy1F/PpoP9Qj90Uz8qYjC/3XgNaifRFwMBs5J OMFG8Zxge66juDLA3UP4w5op k8gg9iBQShewZBw18MvAhYXYhM1PQPof6rVIZvZvA0pTLyAlRfhfqNhd8g0/Drj0Ys9LkH EmEh9G2RTJn4QdbAIwVju66FsRBXWFCoKzllRwpRD7o1LXASwla/kLgLNp v0ShfxL1N5DUv8ng1kNU1wdXQPPTe4J5dH53VkQX4VGCxfEDyuk FBneOuf7YwuAsaLQBz8HWQtwUDsRJh kq RWyDvVspIATycI 8UE4V/TOVphaatvovl3cZWv0jh5H40TT0fcRah/ziyCedO6jOJrC3gtcD3ldJ8KMrKlL/fLFgBj2aN7tgc/3TcgmYgBvE5jDSiKhNJbXQW8hCDwFxHM/JKmju61KprfCe7L1Df mIEtm3CVC9D8Raivlvz6aKb3S5ZirCAB3g58grLwiyJDW/t272wBMJYlumc75B6eHIXVQ0Cp5NaR4wXSGuSZQ7MzgVcRTPuXAetLh/IgRcTfg Y7gH juu4OBrcOkTTOL4J5w3MM5k2XGPT7feDPgRTfypAKiCDD/dH8EVsAjGVBu312sgm1GsH07mmsaVvOMkwI2l1MyM0/i 7hN63C/HdB6P3DqL eysh3GTwdKsMvRP2r0HxDMC3mHMybLlH4/wb0V8M5Sk4jh3HXl6BfL7YAGEsS3XVdUMxCKKnNuyL2ytcvzTl/O2x5Mdx/g1BJTgcuIGj584ETSofzBKFPCdU7oPkh1H DdOAGBraOUV0bg3mn9jmYN12i8H8OqfwM2mr7ItCfiP9U2AJgLBlUr4HdaQjDPQYkTOHLF4 s6CBwHvCa4s zgWrpcDkhiFYJmrQdzLsRV/0aA1seoX5CqMzT/JkdWetrMG 6xDjCLaAXoBxCpK/pviNhC4CxqOju60KQPhuEymEoa/mKz2kKkEL9QZjcuBV4JUHL/yTQO/MqIwhTWhJ6j/rbccn11E/cRWPzSUUw7/moT2dZmddP4vvuJlguu lUH8J4AznhhFkf/FjYAmAsKO1OOu8gzcAnUqTpOlq 81Q2UM6lo XPAWqlw3naeXFc4ddTBPPuBfkKtQ0/ZGDLGpL6y9H8Jahv9ETw44KzGEThP0RwX26hK9ff/6BfL7YAGPOO7twe/HiXgU8JlTmFlvfkVCRE9H0OLj2ZUPjy2uJrb39rHIkDIThXFvp9wPVUVn fwa1V0qEXov4VaL6q9CsLEcyb1m2h09v/08DnKaf7vEdWnTbvJ2ELgNF3dNf24EqrC4Kv0jMkQ31HBrUG jw6Wv75QKN0uNiIU3pWo9AraP4E6NdJh25i4NSMyurnAheg aaeclxYmGDedIl /68Af0uX8Auyan41f/tOLvZdMFYGuns7oS9GQ7quq31WMnwD3HhonxV/EsHfvYRg vZGuaKWj1q6 F6kEPpx8N/BNW5gYMsT1NafDfKqnnLcxQjmTZcY8f9zQr4/BZ hKUjelxLf6bLUboyxjAjddAK Ca4ydfts0MFV4Dl0tPwLgMHyoQhCXzbNC/84Cr3P0Pw2XPUbNDY/SGPTqUjyCtQ/C/VuESP4MyUK/z8g/DxKEq411DHMZ8R/KpbqTTKWILpzW9DpVQ1DL7vaZ8mCdtdCy tGOu2zFwCn0/28lbV87G8vTH1xhdAr HuQ5OvUNu5gYPN6XO1laH7uHHrrF5Mo/NcjXEIuGW5mY7z7zVK/YcYi0u6kUyAVyBXK7bNRy4eSlRT4CULl3cXAC4Hh8uHo1vLx2St Ft9IQfM9IN gtv6HNE4ZJGm8EPRFaD7QMyhzKQTzpkv0 X8AvALk0SL7Me 5/qNhC4DRRdusd9Vg2lNqrFHJQctpuvWE2vpLCLX2Z3F0LR8pTPWuCP6jIN isup2BrYI6fA5oC9F/ZoZzMxbqkQL5SFCZuMeyum VoasPWNRTswWAKMQeoWRVfDkk9Cl5cW3g3tCgsgz6QzJeDGwqnwoptbyMKXQ 8OgN5EO3ULjlEmqa54B8rIigl/82pKM4M/o9hb3YaK4Z1 na5Lv4ml/sAXguET3fCbk3LdcBru3T7FjTRhiX7CG0Cd/MaFv/my6NfCRtDy0/XqJxwbNJ0FvI2l8l8bmJ6htOA3cy8BvDYM2l00wb1q3unQdbwWuBlKELL4ykxn 88FyvrnGNAl5 UK2Wy2oVqEcfMt9jotxOHFIe0jGJTxlSMZRtXx8vTeC78HfjaveSP3E/dQ3nohUXgz 6cssgj9TYtDvvYRpvimJZOQeNEFGTlns81sxN9rood1NV38SJoYpet6nKLkVUF1FaJ 9hM6QjHL7bAz4Ha1stjuYpx7wO5H0O9RO2EXjpDW42nmgP4HmyzGCP1Oi8P8v4NeBFCUjzSFPFtXsL7PSbvpxje4q0nSrgANA15AMn MdjFWglgmJnsWRh2QcS8tHCke9S gfAncTtXX30thcJxl8LujzQg2 L44tK1XoI1H4tzPuLqPuHYKiGtJ9I1sX /zarNQP4LigPdZ64DCMDnX78mH2XWfGrTCMch6dIRnP5shaPhb1TMVUEfyDILdSWXU3jZOVysgzQM4NNfjLPoI/U2K670bgQlRGEe3bGO9 YwvAMkN3bwuZubwCaYuugZenPJKz9wQ4rHACwiinEbT8xYTS2409h8s4tpaHTjCvHMEfB24nHbqLxkkTVNeeDu7cYooOPbvZrnShj0Th30G43w9Qau1dasIPtgAseXTHdkg8 HqopQ F9t2 fKfTbYBQZnsxoeT2OXQPyZiuloenRPA9qG B3kMycDv1Ew9SW38ykj4f/OYpIvjLNW03W J9PUiYWXAb5Vy/B1llC4AxDXRPMSRDpPCry758mpPnkEzCyW G3dtPpXtIxkk9h4v55ulMro3JqWJxUMKmlroTV7ud sZHqG1cj6s F/xp8zQSezkSV2APvB74Il25/v7M8J8PjscPa0miu7cFTZ8lFD5jqX22KMYJJSV1Qsvsawia/hygXjpUuX12ugI5VTDvQaRyB7UN 6hvGiZpPAv0LDRPjrBv/fFMNP3fBVzFPM3wnw O9w9u0dDd19EeYqMZdNpnQwS PRJSQDQOyYj70vUmkI9WjHMkphL6x5H0Lqprd1PfVCMdehrwdNTXjqMI/kyJEf8/Bf6YmO4rPr/FLvQ5FvYhLhC6Y1t4TIqJdfi2D/7U3WehBnIOncaac kekjHdNN1TTiP86RL6UST5IZVVO6ifqFRGTgd3NpoP9vTWw/ETzJsuUfj/DtFfQElQF3x WfjW3tlgC8A8onu2FaE0LURHOkMylIxJwoQ7L5DoiQQf/hKCT7 153Cz0fLQJfRQpO0mwd1HOnw/jU1NKms2I8nZ4Ff1BPOY4XsdT0Th/1fgdcXeBLBE031HwhaAPhMm47RCQF6b3Vpe1LfHWqMVkOfQ0fLncfQhGTP5rHqCeR7U58Bu0sH7qG0cpbZ2A1J9Gvj1JvQzJvr8dwCvRPXxhRrj3W9sAZgj7WKcDEikJ4CXZ6HaNQ0/yTmBMCTjtUxvSMZM6dnmyiuwn6R P7UNB6htWI2rnwG6Cc2lFMzTWb7f8UiMgewjWGz3Uk73iUOGFr/Gf7qkcz/E8UV7rLUI3PDZ GNHigP1qHhE82Lz2RTlWcCrydt7zPcOySgX48wmdx4798J4bc0AfQxX20l9/WPUNjRIBrYCL0G9Q1vxd0qLhSmCaRIXynHgTQTh70T8axlSXZy /tliH/w00D2fC8MxxlvQqD615La9L52A6jo6QzIuBM5k u2z0z6lktDHYN4hXHU3lTWPUD hQjq0GdzJaJ6WIvixN90 95lTbu29HLiWJdTXP1vsQZiCdiedCgw/CYeHoTwkQ71HHDgHXhPQswlddJcQhmSsLh O2fvy9ByHUost4CeQ9AEqqx mfgKkIxuRZDP4Wo9fb0I/d2LQ77eAvwRSVAoXb kW hwLeygKwu6zwOYUHshis2wxCoscQcOHDaisIewxH7X80 k23/uh5WFqoW8hycOkIw9R35BRWb0WqWwG3zChnzei8P8lYQFIQbJYb7UcNX/kuH5AgtArbDwI 1dD7x7zOZA5cOpI9Gl0D8lYWz4U/dHypeN1Cb2H5HHSwYepbZigumYEV9sEOtQe4NPlFhh9JAr/tTgux8cJxqrLXfjhOHtY2p10tQmYrPdE7OMe88TZ1iMEc/5ignn/TGY JGNGp1cE5ehE8OVJ0oHHqK4bp7quTlLfAIwUi0L8HTjOPscFJAr/t4CLyHScVJZsa 9sWNEPTuikK1K2WgWZhLKWH63nDE7AKbfC3nMEdWfQGZLxcmBD XD0V8sXx4wC7GPjzxhJ4wDVtaNU11VJB9aAjITGGxP6BSTm u8ltPbuZ4m39s6GFfcQ6b5roFWB8UkYrMaS2yO0z7oh0BfS0fLPBiqlw82kfXYGREujLfSTuNpBqmvGqK5zpEMjSDIC3pX8 hjBN af JkfIOT676Qr158jQ6cv9jn2hRXxQLV9 coENOtQ3n12PM9ppGEr6vEqVPLTCEU4lxBW9k09h5tJ  wMaFcAFoN3yXCVw1RWj1JdB5WRQSQdBp/0CH35l435J97znFCw9WXK6b7EIwPzv2vvQrEsH6zQSVe46l56xlqXto8O/x9A2kMyLiK0z852SMYsKFzGGMyTyhiVkXGq63Iqq q46hBo2gnmmdAvMtH0fyfw96yAXP/RWDaVgLpnWyGqbUvYoRKGLXrNScnJU2gOQ 2JLcArkfaQjM09h4vSltC/IF6JLqFXJJ1sC311dRVXWwMEoe9U5lGqzDMWhxj0 yOi8Kcuo XBCTK0dPv6Z8uSfdh077ZiN5oUtEkotC8NyVD17aA5XUMyXgM8j7kPyZghXUIPkrRIBieprs2orklI6nWQikXwlyxR D8K8kugwefXUDG9XAt9jsWSevhCJ50PWlGq8fw6QzLa1pkAupkwHONiQvts7/Lcr2Kcady GMyTnKTRoromo7pWSAer4CrBvG/31lswb kRhf8LOF6Pb7uQiqw8s7/Moj6IobFGwsTorAZJq6d9tvgoQk1MFfQcOlr XGCgfDj6n6Y7yi1rR/A9Sb1FZXVOda0jHUqRNO28bvK xIla5XuE4PBBVmC670gseAwg PIC2gAZA1RQl5C0QMjCBgpF8s6zCTgf1bjHfG/4tVfLz/P1tCP4iqu2qI7kRQQ/RSpV8IIWFkxb6E34lzCeIPx7gTcShL U7lvs05t/FvQS/Y8 HSfkiAykCQ6Ptm1jCDn4Z9M9JGOIjhpdIC0/BQ5Ql5EMtqitg8rqBFetAFIqx13oW2rMnvhMjRJKvG kLPxphjSWV2vvbFiwp9V/9sNMjId Gak46ueMFB6 20D3kIwzes5rAXz5Y6HoZP2ArDurwuCqQbJMyDPL2C1fyq29lwKfoSvXnyADJy/2OS4IC YCTI6nNC5cL9QTZTwfpuXfRUsvAV7IU/eYn uQjP6hQOp8a8djqb/zQK1y5pbxZMvJFWq1Cq0s9oQYy4s4mvU9ROGPk3zR40b4YSFjAOJp3njA fE8R/Wnqk8f/u9ufTWnpUkYqrGQvvwsTj/B6dhopXX7XWl2/65metYZY8mpJ1dxSUoro5SSNJY2MeL/QeBDQIqQRYdAhrYu9vktKAuiXUc//VEEQSdzpxNexfF7 ePN5yQbaoek4up4HLKEZ807Uf9IM9NxX6WaCs1mmj 4L/UPP9Z0g4OZjIykqEqwBpbmJRhAR/g/CfruYq/DEINa4em I7EgPrULrrLgJKfmhknkFWRK8 5DFbw2l6jYT40qOIdUq6JPPNFo3vCdSuv7d4zhfYtKGl43liJR L8O s6i5yvmaY9L4YcFC6pJ 71EeCnKKaTi/ZPZQOve0YxUcpab3KhCmkKaptm99w9O/r9v5v6Rx8apVrX9urFUiD7/PcDloS88KwZ7HL/CDwuwABza9jdIcZ LH70OAMVLRcj2T9TzByYmqIguy0VAFalW0bGxevOG71Syu 8ZI0lynLNFYGkQc/2PEiL Dxd/b5v xzPzvgBUshQNjnFG6MJ7Tfu9FSQV17p/tOoPtsZJhWW3CEAQ9CSBJElbd/1woPntmya1lTXNJVh0Yq6/CVwB3E1ngzZIc2To NX sAALgJbMf0L57tPpRPyL8h6ttH542GnLTy7b7SkKQZdaVfxDDw80v/ZN7x9/Ypxq1RaBxUHpNIBdCXyVrtZehzRWxlCPubBQ4tZt/scVGIqmXMGP5/XWjw/nOMmWpRXQvh6FSgWdmKg3v/ntNN zd4xqVW0RWHBijf/vA58AUiZqWSwoleHls3vPfDKvacDxa64CoFlteBSc g8AJxUvd3lfkgj UJ5KKhNuTaVCXoz5WAo4Uf9oM9OxvIqb5kk5B5D4vQ84RMbdxhNSvF8qV7TSiRH/vwHeD4Rak9XNsG3jCm3tnQ3zbAEE87/aHCfx2XMJPfvtF7oI8QDJdo7W/BPLOB7Qvp7i5CuVpHXn3Y3W9 8YJ03yrteM SAK/ dI TVKnX2MJsddoc xmOcFwJff4xKC4Mcy36cSrLO09aNlHg8oo4rUqi778f0Dre/eOoFzLcsQzBsx3XczyM RJfEmK8pxH/CbinkTsYlPfrg4vOaFKn998dKRzeAYDxjL69m9ozluGdYHTHlditSqku15YKB5481NILNFoO/EdN8u4I2ghyDvaP9ltGPvQjJvC4CmKaAutMzJWYSmn2O/p4JUhOzhyXq b2KCyjJ3BdrXFRaBfN/ wea3b2qiapZA/4hDXQ8R vp305XrF0RWgjnZf bvroQHOx7/YkINQOzlP8bvduoD9HA2TrJCFgGvSK1K/vAjA81v35TZItAXtPT1bcAtlHP96lbkMM9 MS8LwPinror fBz28YYZH0QAr5Xmjw6DamvJZATmSlwEHnm0YYtAX4ja/1eBzxNbewHEISNm h N bEAgvA7BE8Y1vnSGb9fjAc8mTVaO8aapOJXhBUA3YvAjTe3AFsEZkdGMPX/DPhbYqFPMVlSzO8/JvPpGMVjX0QY6zU9879MEQ/IHxiv 8eaE8s NVgmLgIPPTzQvOmWJiItayWeETHd9w/AHxAWgixOabKI//To wIwee1H4rfR/P ZOR1QASdJ697DiTZXSGowEheBffsHWrfe1iRN87kf9LggCv/1oFeiLoyQBdDlv2X3QtJ3cfI dP0SPpBNhJ155vZeDvy4r2X3raDUYMQrUq1KtmvvQOv7d0xQSb25Akcl5vp/gHBFsJz8itqyeyGZL30aj3shsJrZmP9lyqnB/SsoNdi vqJO4N4djezuH41b78ARibn h4BLUR5DS m 1M/h0McnfV0AJq7 SO P5mb l1GQRFzr/tGKjuUTKyY12L6 UDHY sE99XzHTlsEnkrsIJ0ALgd RFe6T5DGytm1d6Ho6wKgLoHODr3rCVt29e99HJBptfXjw2Fy8EqLmakilTRp3XZHxe/bP061YpmBQGzthbBr7zfobe0dsVz/bOizC9BV 38BsIG5mv9lFEiF/ECrnu0dnyRdhlOEjoUIOFdp3vy9VJ84OE5qQ0XotPb LnA1XcIv1to7B/q2AIx96mP0yPnPzssZx67BXWNVfyhbka4AzkGWV5s33iw6OTlJkhzPi0CM P8V8N/C95KRF1W w6b550LfFgCR9ty/HFhLCAD29T06b0aYIvTjFVYlGFGFNEFHx qt796agx6vNQJR Lcznv97FAeE5rLEWcS/D/RROLtq/18JbKSf5n/vW4UqwXq2e7y5Il2BYrJQ/sijjdZtdzappPlxZgXEdN93QN/OiFBMl7V0Xx/pywIwes3Hew/1s/N 5tEV2DNeW9YDRY96jUWNwM5djezH900cR5mB6PPvAN4EMkrLtcd4I5bu6xd9WQBc2F8hmv rCeW/fTv EQl7uaWte0cd TLbYGS6qCKVisvuvLvm9z80TmXFZwZirv8J4DLgAUqtvTJ8KjJk6b5 0U8BLZv/J9KZyDp/RFfgUFbPdo 1VlTDUJmQGUibt9yW6OjoxAoOCsYx3jmhtfc2yrn FbnCLy5zXgCmKP65rPi6ME9ocAXI9o7X/IHWymoYal9jkRmYbNZaN39PQ BzRQpDVBrvBr5AV7pPLeI/D8x5AVDXrv3PgTXAq/t17GkTZCFt3Xd4RbsCVFLyxx6vt26/q0mlstJ6BmJr758CVwEpic/ih2uTfOeHPghpV/T/VYQGoPmJ/h/tFBLBH87rrV0r2BWIQcEdO v5jl0TK2jTkZju ztE/5jY2utD3M8i/vPHnBaA8auv6v3RZbM5Tl8oXIH8gfGaf2KFugIQg4JJ6/a7Uj1wYCVUCkbh/1eEd Gl1Npr6b75Zm4WgBNChIocWMdCRf PRHQFVnJWAMIt93m1ecttkOcTOLdcV4CY678DeAva3g7Gcv0LxJwEVbtr/y8CTmChzf/uEypcgRWeFQhbk3t/8Mla67bb60VAcLldaUz37SPs2nuA8iRft5ImvyxdZn2Xx675ONL9629c7IsBurMCK9cVyIt4gMvu3/UBvP84nUDsciC29o4Rnpv7KKf7JEEGrcFnIZjDMttV/LOJxTb/y7SzAqMOv6J6BUIbdNCUjwNvSs847X3abP42cBdlDbp0aZfzAu8Avk1vum/o5MU x OGuQpr/P3XEFKAi2f l kUCNWyPePjVNzy3nE44Is/IWAG5yBcR7VSlYGBg8AvAS2K7ZgW 2SPQl6c428C14br0SD8aum hWZWC8DE1R L38YH7U2LfSElgpZU8qJXYMQ/3kxJlnU8IKOzyeV7PXKxwoMoSeW8VzfJshT4FvCHxb9fqq5AjPj/D B/0tb8Ra5/xIJ C82sFgBNFOk8kKcS8v zPl4fUMJDHy2QhLAl9KOa64f9E60rgbHiOVtOy4CnIzR3E/ZX KBD09Abp3l26/UQFwjhL4Av0lU u2SI1/Fp0N9ut/ZKLPQx4V8M0pn gv7JnzChCkhcAF4PDNLp4FpIcgqDv/Teh4AvA59E5V8bbz3zSR44oHjdStCQMfW01ImLWQp8BHG/CYyhPgq3AqRPO7PzG2Fp 1XgJsJItlhbv9hE4b8BeAfpesgeC7EAtUKfxWTGGnvymZspnqmoYRba/I9aMQp SvB9v0rwg5 GcBnCtbJh4ODk53cko/ 8X3D8GfD94t8v5UBZOdB3AHiTwi jfhL1CZBpIeqNK36xLDwxPrAD I3SzxabuODeS3hWxskeK8UplpNBtvKYuQUQPq o/Z8FvLx4aT7N/xgAc6U/Hvge8CngOkIqSRyqXiUBRB8ZzeuvPjGrHZpM8EwAvwV8haWhFY90nUr4XP4N AVgr3RMegVBUBpX/GLnt5wH70B8Vkxm/UdCYPbn6WjfxbqemLG4FNhf/D0oj2YTWXfWIp2aATN8MPSaDzMRvo0CeCmdFE6/H7Lo10efPi4wPyII/DWofr812NDqxATqw8Lgkdx5zauHJphc1YBDk DJcSTA9cCHgH83T c8F L5ZMD7DqSND6zKJsShiSBZuCFK44orn/KLMngaengX DpIM2r93yFsyrKVzuK5kET3IwPeAtxJOd3nxIR/CTAjAZgIbraI85kqDnWx KdfD1d5/HP06wV4EPgscLUi3yKY/IgglbGJVAsLQQSvCrkT5F3vCQfcdV1Rstw 7h8BrwXOYHEEo5dyeu HBK393TXZeHRV8jjvrEvr9yBDp6KHdhb3UBLgEeDXi/u2WNeVAO8iWDPd6b5B8/uXArPRgE69ywkR6XPoVHXNhRjUSukE854gRLT/iaC5RwEQFdG2H 9RDWkkgfrlTxUQOfWN6O5t0IkZHCCMl962UDf5GNcdA30fFfQ3gDFFugJ9iNK4/F3HPJgMb0UP7QI0LxaBzxF2zX03C2vxxPf6I DvgZT7tmScsQs0sS27lxDTfiAmr/tbfHdi6S3F19lG1aPmK0fwx4GvAZ8E/i/wGCAqqqKSAiqKz5HMFXmk puPLRhthyUhJydB2Y7wj8DPsTjZi jepAT/ JeBazUIbWiFLTia1j8y0eJRgPeDXAScycJYPFH4Pwr8p/b1nPEAYQMPE/6lxLSDYePXXBX/vQKrCD7dycws1dQbzIMgCDcRNnz4jFPdHSJdiSo ugB5zqQ6qjgcuVMG3zQzwdBd1xWNi 1r2AzcQphefORrCJuR Nbdh8bzRyYH 9BbEAN9CSFd U5gL12BvsDshJ/CCgA6AbfXAv/C/C8AUfi/gNPXk4uWay8s3bf0mNbDMHnth3v//U8RhH86pb8xrRUfvrT4ehfwH4HnNK648qXey1/53O32Ik5FEsWLOJeT5RmIplph4Ip3Ub/iyhkLPwRXoHQ KWHY5H8ofrZQ6bJY0afA79VvvPLV4MPQS5Esbq5QZ2TWwh usFhDnIvWzReADxfvnc36uEcnWjTfA95C7ry19i59pqW5Jz51VWj76RjTnwdex5HN594IftSwu4DtwKdE/XfF 1wVNE3bqT1FfEtSKprhHNTfdCX9QvduB69x83KHV08iXwQuPuK19McCKAf67iEE m6CUiyj DQal89B8MunfWhnccsREAVdB9zM/GQF4vH2AucDOymn yQEKY2lx7R89x7hP4upd/05UgT/UYI//0nQrykSMomSiCauLQBO1KuGnR9WXf6OeblYOfnSEBA8PAGDdUgEQkDwfGCA amcKwf6rgL5DWAUtMvkT1JP9bJf6t 1tgOCKGhCiKf8DqEBp5/EIPBhQmvvTsrCnyuyemuf39LoF8dcACY/fRU zGqNC8BbgDodf2 qctzDhIKbfwK BHowKqIYzAOfS06GE9QptWlEufuBbLksLAKCR9vTaP4rYRhlP8uEewN97ybUwYf7pDEf3j t/xQmxqHegI51cx30NfgZW3sFeDsdq6azcedq0/xLmWM 7D58vCKqGVBVkbfFl gIPkCT0JF2NfBZVPaByo2rRV90sPg36nxOljkSBEf9rf0z72eEeFAHkBfG6wcIuxk9n/6Yx WKvq8QAn17KC YAk6E2uXzdw9kw9nBClAFaW n8z6CBbeJuVs8cYF7D/AZIEXjtu1W478cmO6D7lQEFXkNcDbhAa8Wr90K/B7wLE1aFyD w6D7EE0QkhcdVKnvP5znIrmgmhCCeVNVtC0Uckq7fUGLCsFJgisAc3cByoG 99e31i7yyl4gcSKZ0NlFdT6Fv32tw6dSGhkWg59/ULw8l BntAA/APIhouaXYC5aX//y4JgP /g1V6HhEVLCIIpXEwJZnwGuUae3jW3Y54d2bUHrWblO39cbB5kYXwXIogr8kdDd26DloeKiz/rXwK9QLpqZfhCwN9D3DuBGegJ9AtTnEuGfzXUe3l2eHBw/n6MHP49OvD fRPK3hf4DV1g9pvmXE9Pxd6Pwn07oNLvAi9wA0hIU8cjgQyelWs88iNc88eJyxHnkDb 92Nd3dJyLd8AXS F/RHkDM69vKAf6PkboxjtMT25fFRpvXljhB5ChLeiTu3prNt9L6BVozPBao/B/DXhnmO8jPq4wJvzLi2N 6GPXtKf/RLNWRQjWfAx0OQ2pAi803rz0NP3RKMqEoRO5/nngfxM149EtgHKg7wDwboFrtNCoguQAHmVggbX lNd6aFcsg4qBuj8m1GJMt0w4Wgv3EBaPh2lbFGJbdy1DjhkDEEBoIeReUCdooqp4l2QqkoPSanoal//ishN CFmBgjir7v8QquY6qaypKZv81xP6Iq7RjsmfK4p6vySEHwCN1cHt6/oLQhZkOjMSYtn2o4Qu0IcpDyFdmXsVrniOueqH56UCgKB5VH4DFY/8zPIT CmRwgLuaPb3EnY5HjjCLYlaPwP IHm88mf5 qbgJdEivRf27hAG37pEhB QkdNis1DsGJwgZAX 5Ri/Gl2EJnAFYTxZJ90nigxZjf9yxJbtAt29LT7m8cH Q BPUXJSkZILkBUm9I8I7kJPoE9APY3pNCkt1rUe2hWsAWkHPz/BkWsDYoFXQsj1f4Iu4bcqv XMYvfCLx1iiTDkwSLQDwK30zFzyy3LH0c5F20Lf06M8gtLWvjbiIOOzfOHdHbm6c1xxEXh/UThV82iTWDCv7wxC6DEFAHBS4AvkEqz9YNDefbI5KRU3Lvx inC4ikCuRYtL3Nq4Fnoa 0UCEVt/rvAB gOCMbv/xr4tfZ90RQks4j/CsAsgBLtgKDTHCVB SJe/4lcq1Td1/J9E c07zz4KYJQKJDHWtjlJPxAqEh2xXDXEMb7K4LFE92ZKPyfY2D9r9GpHzDhX0GYBdCD7t0WRmnk6lA8Xs SqvsicDmp3Nq6d7SS7x9vlW/dshP eK1PnRvwesIUoRYh8nszcAEih1FtLwAm/CsHWwCmQPdsC0VClQSa3oFvjH354XE3lEJWjB9FaVyxDHz9Y11rZxGIAn4toavvfkImZE/pNRP FYa5AFPQvP0g2szR0Sb 0KSS61jj/PVaP2 tr79kLRWyFSH8QJEC7eI/E3L9byYIfynXvxS2GTD6iVkAR6ATEBSKMsd2mkC2LI2d0Pt2rYfCsM4wfVxSYBNDN 3l8As7fn8CMmDaf6VhC4CBPnEfJGksEy4qokTQQvidIkNbF/s0jXnAFgAD6IoFAAh5rvgMqnVkyGr8DcMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMOYIf8ffvS CdpwS8oAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDktMzBUMDY6NTQ6MTArMDA6MDCVtnPQAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTA5LTMwVDA2OjU0OjEwKzAwOjAw5OvLbAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAASUVORK5CYII=">

    <animateMotion begin="0s" dur="10s" rotate="auto" repeatCount="indefinite">
      <mpath xlink:href="#path"></mpath>
    </animateMotion>
  </image>
</svg>  

Комментарии:

1. Однако вопрос касался CSS. Это чисто SVG-решение. Хотя, похоже, это работает.