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 you have read our privacy policy.

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