Анимированные SVG круги с трансформацией - PullRequest
Новая
       0

Анимированные SVG круги с трансформацией

1 голос
/ 20 марта 2020

Я пытаюсь оживить 3х отдельных кругов в одном SVG. Я заставил их оживить, но они переместились в верхний левый угол. Это произошло, когда я добавил следующее CSS: 

.payment svg * {
    transform-origin: center; /* or transform-origin: 50% */
    transform-box: fill-box;
}
            <div class="payment">
            <svg width="689px" height="370px" viewBox="0 0 689 370" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
                <title>Circles</title>
                <desc>Created with Sketch.</desc>
                <defs>
                    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
                        <stop stop-color="#454545" offset="0%"></stop>
                        <stop stop-color="#FFFFFF" offset="100%"></stop>
                    </linearGradient>
                </defs>
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Artboard" stroke="url(#linearGradient-1)">
                        <g id="Circles" transform="translate(1.000000, 1.000000)">
                            <g id="mini" transform="translate(0.000000, 60.000000)" opacity="0.50042" stroke-dasharray="3" transform="rotate(360)">
                                <path d="M127,254 C197.140163,254 254,197.140163 254,127 C254,56.8598368 197.140163,0 127,0 C56.8598368,0 0,56.8598368 0,127 C0,197.140163 56.8598368,254 127,254 Z" id="Oval"></path>
                                <animateTransform attributeName="transform" attributeType="XML" dur="15s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
                            </g>
                            <g id="small" transform="translate(135.000000, 30.000000)" opacity="0.5" stroke-dasharray="6,10" transform="rotate(360)">
                                <path d="M154,308 C239.051851,308 308,239.051851 308,154 C308,68.9481485 239.051851,0 154,0 C68.9481485,0 0,68.9481485 0,154 C0,239.051851 68.9481485,308 154,308 Z" id="Oval-Copy-3"></path>
                                <animateTransform attributeName="transform" attributeType="XML" dur="25s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
                            </g>
                            <g id="large" transform="translate(319.000000, 0.000000)" opacity="0.5" stroke-dasharray="16,10" transform="rotate(360)">
                                <path d="M184,368 C285.620394,368 368,285.620394 368,184 C368,82.379606 285.620394,0 184,0 C82.379606,0 0,82.379606 0,184 C0,285.620394 82.379606,368 184,368 Z" id="Oval-Copy-4"></path>
                                <animateTransform attributeName="transform" attributeType="XML" dur="35s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
            </div>

Но без вышеперечисленных CSS они не остаются в одинаковом положении и не вращаются.

Кто-нибудь знает, как их удержать в том же положении и вращаться на 360 без движения? 

            <svg width="689px" height="370px" viewBox="0 0 689 370" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
                <title>Circles</title>
                <desc>Created with Sketch.</desc>
                <defs>
                    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
                        <stop stop-color="#454545" offset="0%"></stop>
                        <stop stop-color="#FFFFFF" offset="100%"></stop>
                    </linearGradient>
                </defs>
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Artboard" stroke="url(#linearGradient-1)">
                        <g id="Circles" transform="translate(1.000000, 1.000000)">
                            <g id="mini" transform="translate(0.000000, 60.000000)" opacity="0.50042" stroke-dasharray="3" transform="rotate(360)">
                                <path d="M127,254 C197.140163,254 254,197.140163 254,127 C254,56.8598368 197.140163,0 127,0 C56.8598368,0 0,56.8598368 0,127 C0,197.140163 56.8598368,254 127,254 Z" id="Oval"></path>
                                
                            </g>
                            <g id="small" transform="translate(135.000000, 30.000000)" opacity="0.5" stroke-dasharray="6,10" transform="rotate(360)">
                                <path d="M154,308 C239.051851,308 308,239.051851 308,154 C308,68.9481485 239.051851,0 154,0 C68.9481485,0 0,68.9481485 0,154 C0,239.051851 68.9481485,308 154,308 Z" id="Oval-Copy-3"></path>
                                
                            </g>
                            <g id="large" transform="translate(319.000000, 0.000000)" opacity="0.5" stroke-dasharray="16,10" transform="rotate(360)">
                                <path d="M184,368 C285.620394,368 368,285.620394 368,184 C368,82.379606 285.620394,0 184,0 C82.379606,0 0,82.379606 0,184 C0,285.620394 82.379606,368 184,368 Z" id="Oval-Copy-4"></path>
                               
                            </g>
                        </g>
                    </g>
                </g>
            </svg>

1 Ответ

1 голос
/ 20 марта 2020

основная идея - вращение вокруг источника (0,0) до перевода: 

<svg viewBox="-200 -100 400 200" width=90vw>
  <defs>
      <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
          <stop stop-color="#454545" offset="0%"></stop>
          <stop stop-color="#FFFFFF" offset="100%"></stop>
      </linearGradient>
  </defs>       
  <g stroke-width="1" fill="none">
    <g stroke="url(#linearGradient-1)">
      <g opacity="0.5" stroke-dasharray="3" transform="translate(-100,0)" >
        <circle r="80" >
          <animateTransform attributeName="transform" attributeType="XML" dur="15s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
        </circle>
      </g>
      <g stroke-dasharray="6,10">
        <circle r="90">
          <animateTransform attributeName="transform" attributeType="XML" dur="25s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
        </circle>
      </g>
      <g opacity="0.5" stroke-dasharray="16,10" transform="translate(100,0)">
        <circle r="100">
          <animateTransform attributeName="transform" attributeType="XML" dur="35s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
        </circle>
      </g>
    </g>
  </g>
</svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...