使用变换原点对SVG圆进行动画处理

debugcn 发表于 Dev

杰里·凯利

我正在尝试在一个SVG中为3x个单独的圈子设置动画。我让它们进行动画处理，但是它们已将位置移动到左上角。当我添加以下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>

Q中的陌生人

主要思想-翻译前围绕原点（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>