CODEWITHSUNDEEP
csssvg
JMKelley
JMKelley

Reputation: 658

Animate SVG Circles with Transform Origin

I'm trying to animate 3x Individual Circles within one SVG. I've got them to animate, but they have moved position into the top left corner. This happened when I added the following 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>

But without the above CSS, they do not stay in the same position and rotate.

Does anyone know how to keep them in the same position and rotate 360 without moving?

            <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>

Upvotes: 1

Views: 770

Answers (1)

Stranger in the Q
Stranger in the Q

Reputation: 3898

main idea - rotation around origin(0,0) before translation:

<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>

Upvotes: 1

Related Questions