Question 303269 in CSS Question posted in
Some basic documentation can be found here.

Css – SVG Scale Animation

I am trying to modify this SVG code below to change the Scale Animation from Center Point instead of Upper-Left Corner.

The transform I want to scale from 1 to 0.8 (smaller)

[https://codepen.io/Binh-Pham-the-bold/pen/dyaLqdG][1]

<svg id="spinnerLoaderRef"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 100 100"
     width="150"
     height="150"
     overflow="visible"
     fill="#20207A"
     stroke="none"
     class="single-loader">
    <defs>

        <circle id="spinner"
                r="8"
                cx="50"
                cy="50"
                transform="translate(0 -30)" />
    </defs>
    <use xmlns:xlink="http://www.w3.org/1999/xlink"
         xlink:href="#spinner">
        <animate attributeName="opacity"
                 values="0;1;0"
                 dur="1s"
                 begin="0s"
                 repeatCount="indefinite" />

        <animateTransform attributeName="transform"
                          type="scale"
                          additive="sum"
                          dur="1s"
                          begin="0.13s"
                          repeatCount="indefinite"
                          from="1"
                          to="0.8"></animateTransform>
    </use>
</svg>

Please help to change it,
thanks

Tags:

2

Answers


  1. 0

    Simply add:

    style="scale: 0.8; transform-origin: 0 0;"

    enter image description here

    Login or Signup to reply.
  2. 0

    Use transform-origin and transform-box.

    <svg id="spinnerLoaderRef"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 100 100"
     width="150"
     height="150"
     overflow="visible"
     fill="#20207A"
     stroke="none"
     class="single-loader">
    <defs>

        <circle id="spinner"
                r="8"
                cx="50"
                cy="50"
                transform="translate(0 -30)" />
    </defs>
    <style>
    use {
    transform-origin:center;
    transform-box:fill-box;
    }
    </style>
    <use xmlns:xlink="http://www.w3.org/1999/xlink"
         xlink:href="#spinner">
        <animate attributeName="opacity"
                 values="0;1;0"
                 dur="1s"
                 begin="0s"
                 repeatCount="indefinite" />

        <animateTransform attributeName="transform"
                          type="scale"
                          additive="sum"
                          dur="1s"
                          begin="0.13s"
                          repeatCount="indefinite"
                          from="1"
                          to="0.8"></animateTransform>
    </use>
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search