3

Я хочу создать такую анимацию, которая вращается вокруг двух фигур. И я хочу добиться этого в SVG без внешнего CSS. Может ли кто-нибудь помочь мне, как это сделать?

Это мой код:

<svg xmlns="http://www.w3.org/2000/svg" width="542" height="542" viewBox="0 0 542 542">
  <g id="svg" transform="translate(-655 -265)">
    <circle id="Ellipse_3" data-name="Ellipse 3" cx="271" cy="271" r="271" transform="translate(655 265)" fill="none"/>
    <path id="Path_1" data-name="Path 1" d="M818.25,412.875l.71.931c116.417,110.219-.023,204.664-.382,205.428-.045.089-.2.312-.375.672-2.758,5.713,3.239,3.015,3.594,2.858,147.217-64.969,210.869-212.39,210.672-213.249-.359-1.7-3.069-1.088-3.344-.781-4.366,4.893-81.574,88.727-207.317.617-.169-.118.317.2-.673-.473s-2.369-1.12-3.148-.181-.909,2.256.388,4.35" fill="none" stroke="#707070" stroke-width="1"/>
    <path id="Path_2" data-name="Path 2" d="M927.651,569.319s69.788,5.194,99.3,51.994c.017.04,4.351,6.826,5.406-.172a1.6,1.6,0,0,0,.069-.516,5.747,5.747,0,0,0-.21-2.031c-3.036-7.836-31.037-76.552-54.932-98.845-.009-.009-35.627,38.007-49.635,49.57" fill="none" stroke="#707070" stroke-width="1"/>
    <g id="Ellipse_1" data-name="Ellipse 1" transform="translate(655 496)" fill="#f90a2a" stroke="#000" stroke-width="1">
      <circle cx="34.5" cy="34.5" r="34.5" stroke="none"/>
      <circle cx="34.5" cy="34.5" r="34" fill="none"/>
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="10s" repeatCount="indefinite"/>
    </g>
  </g>
</svg>

введите сюда описание изображения

Свободный перевод вопроса Svg animation without css от участника @Ghayas Ud Din.

1

1 ответ 1

5

Если загрузить ваш файл в векторный редактор, то увидим, что фигуры находятся вне холста SVG

введите сюда описание изображения

Из-за этого, вы были вынуждены применять несколько команд трансформации transform="translate(x,y)" для возврата фигур в зону видимости

Практический совет:

Необходимо стараться при создании фигур в векторном редакторе рисовать таким образом, чтобы эти фигуры не выходили за границы холста SVG с учётом ширины обводки. Всё, что выходит за границы холста SVG, будет обрезано (скрыто).

После перерисовки в векторном редакторе и очистки файла svg от лишних команд необходимо:

  • Получить сегмент, используя stroke-dasharray = "251,1004", где
    251 - тире, 1004 - пробел
  • Для анимации вращения нужно было помимо угла дополнительно указать координаты центра вращения.
<animateTransform attributeName="transform" attributeType="XML" type="rotate"
 from="0,266,278" to="360,266,278" dur="4s" repeatCount="indefinite"/>

.container {
width:75vw;
height:auto;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg5" width="50%"  height="50%" viewBox="0 0 542 542" >
 <defs>
   <linearGradient id="Lg" x1="0" x2="0" y1="1" y2="0">
      <stop offset="0" stop-color="#DC143C" />
        <stop offset="0.8" stop-color="white" stop-opacity="0.05" />
   </linearGradient>
 </defs>   
<g id="g820" transform="translate(-658 -238)" fill="none" stroke="#707070" stroke-width="1">    
   
    <path id="Path_1" fill="black" stroke="black" d="m818 413 1 1c116 110 0 204 0 205l-1 1c-3 6 3 3 4 3a446 446 0 0 0 210-213c0-2-3-2-3-1-4 5-81 88-207 0h-4v4" data-name="Path 1" />
    <path id="Path_2" fill="#DC143C" d="M928 569s69 6 99 52c0 0 4 7 5 0a6 6 0 0 0 0-2c-3-8-31-77-55-99 0 0-35 38-49 49" data-name="Path 2" />
</g> 
   <circle id="Ellipse_3" data-name="Ellipse 3" stroke="url(#Lg)" cx="266" cy="278" r="220" fill="none" stroke="#DC143C" stroke-width="45" stroke-dasharray="251,1004" stroke-linecap="round" >
       <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0,266,278" to="360,266,278" dur="4s" repeatCount="indefinite"/>  
   </circle>   
   
</svg>
</div>

Свободный перевод ответа от участника @Alexandr_TT.

9
  • Надо отобрать у вас stroke-dasharray))) Тогда SVG наполовину будет нефункциональным, похоже)))
    – Leonid
    30 окт 2021 в 19:40
  • 1
    Живот - плохо, конечно. Зато теперь сколько интересностей попрет здесь от вашего лица...)) Будем ждать, будем посмотреть, и даже будем поучаствовать))
    – Leonid
    30 окт 2021 в 19:49
  • 1
    @Leonid кстати, готовлю вопрос в стиле поршневого механизма для тебя, хочешь? 30 окт 2021 в 19:54
  • 1
    Заранее не скажу)) Поглядим - увидим. Интересно когда вызов есть какой-то, а у вас уже и решение готово сразу обычно. Хотя однодневным участникам что-то решать совсем уже надоело. У них даже фантазии не хватает обычно запомнить пароль от входа и ответ посмотреть)) А других вопросов обычно и нет. Вот и получается, что мы тут как Шарик с фоторужьем бегаем за зайцами, чтобы им фотографии отдать. А они им и не нужны. Важно было только вопрос задать...
    – Leonid
    30 окт 2021 в 19:59
  • 1
    @Leonid согласен, кинут плохо подготовленный вопрос и неделю не заходят за ответом, который ждет их. Не понимаю, неужели даже на любопытство не хватает сил (((( Оч. напоминает, когда пацан идёт по улице и у всех подряд просит закурить, а вдруг, кто-то и даст. И тут похоже так, разбросает свой вопрос по всем площадкам и не помнит куда, что бросал (((( 30 окт 2021 в 20:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.