Html Question posted in
Some basic documentation can be found here.

Html – How to time a svg transformation with javascript

In this example, the svg-plus button transforms into a close button when clicked and vice versa with svg.setAttribute("transform","rotate(45)");

Is it possible to time this transformation so that it’s not just a change from one to another but a smooth transition?

Here is the example:

function rotate() {
  var svg = document.getElementById("svgID");
  if (svg.getAttribute("transform") === "rotate(45)") {
    svg.setAttribute("transform", "rotate(0)");
  } else {
    svg.setAttribute("transform", "rotate(45)");
  }
}
#button {
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  box-shadow: none;
  border: none;
}
<button id="button" onclick="rotate()">
        <svg id="svgID"
        width="100%"
        height="100%"
        viewBox="0 0 142.40739 142.40991"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:svg="http://www.w3.org/2000/svg">
       <defs
          id="defs6" />
        <path
          id="rect234"
          style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:stroke fill markers"
          d="m 85.223081,28.929132 a 4.2333333,4.2333333 0 0 0 -4.233333,4.233333 v 62.801852 l -65.486442,-0.24339 a 4.107912,4.107912 0 0 0 -4.247803,3.96255 4.2333333,4.2333333 0 0 0 4.217313,4.249353 l 65.516932,0.24339 v 62.9295 a 4.107912,4.107912 0 0 0 3.978568,4.23333 4.2333333,4.2333333 0 0 0 4.233334,-4.23333 v -62.89901 l 60.21338,0.22376 a 4.107912,4.107912 0 0 0 4.2478,-3.96255 4.2333333,4.2333333 0 0 0 -4.21731,-4.248833 L 89.20165,95.994807 V 33.162465 a 4.107912,4.107912 0 0 0 -3.978569,-4.233333 z"
          transform="translate(-11.255471,-28.929132)" />
        </svg>
     </button>

svg transformation with setAttribute("transform",rotate(45)")`:

svg transformation with setAttribute("transform",rotate(45)")

Tags:

2

Answers


  1. 0

    You need to can use the CSS property animate.

    The following shows a one-way/one-time animation. (once clicked it wont return or animate further)

    let svg = document.querySelector("#svg")
svg.addEventListener("click", () => {
  if (!svg.classList.contains("animateSVG")) {
    svg.classList.add("animateSVG")
  }
})
    #container {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100px;
    width: 100px;
    border: 1px solid black;
}
@keyframes frames {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

.animateSVG {
    animation-name: frames;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
    <div id="container">
    <svg id="svg" viewBox="0 0 3 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
        <path style="opacity: 0.468379; fill: none; stroke: #000000; stroke-width: 0.264583; stroke-linecap: round; stroke-linejoin: round;" d="M0.5,1.5h2zM1.5,0.5v2z" />
    </svg>
</div>
    Login or Signup to reply.
  2. 0

    Method 1: requestAnimationFrame

    function anim(from, to, cb, duration=100) {
  let startms;
  const frame = ms => {
    const x = (ms - startms) ;
    if (x > duration) {
      return cb(to);
    }
    cb(x / duration * (to - from) + from)
    requestAnimationFrame(frame);
  }
  requestAnimationFrame(ms => {
    startms = ms;
    requestAnimationFrame(frame);
  })
}

function rotate() {
  var svg = document.getElementById("svgID");
  if (svg.getAttribute("transform") === "rotate(45)") {
    anim(45, 0, v=> svg.setAttribute("transform", `rotate(${v})`));
  } else {
    anim(0, 45, v=> svg.setAttribute("transform", `rotate(${v})`));
  }
}
    #button {
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  box-shadow: none;
  border: none;
}
    <button id="button" onclick="rotate()">
        <svg id="svgID"
        width="100%"
        height="100%"
        viewBox="0 0 142.40739 142.40991"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:svg="http://www.w3.org/2000/svg">
       <defs
          id="defs6" />
        <path
          id="rect234"
          style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:stroke fill markers"
          d="m 85.223081,28.929132 a 4.2333333,4.2333333 0 0 0 -4.233333,4.233333 v 62.801852 l -65.486442,-0.24339 a 4.107912,4.107912 0 0 0 -4.247803,3.96255 4.2333333,4.2333333 0 0 0 4.217313,4.249353 l 65.516932,0.24339 v 62.9295 a 4.107912,4.107912 0 0 0 3.978568,4.23333 4.2333333,4.2333333 0 0 0 4.233334,-4.23333 v -62.89901 l 60.21338,0.22376 a 4.107912,4.107912 0 0 0 4.2478,-3.96255 4.2333333,4.2333333 0 0 0 -4.21731,-4.248833 L 89.20165,95.994807 V 33.162465 a 4.107912,4.107912 0 0 0 -3.978569,-4.233333 z"
          transform="translate(-11.255471,-28.929132)" />
        </svg>
     </button>

    Method 2: animate

    function anim(el, from, to, duration=100) {
  const animation = [
    { transform: `rotate(${from}deg)` },
    { transform: `rotate(${to}deg)` }
  ];
  const timing = {
    fill: 'both',
    duration,
    iterations: 1
  };
  el.animate(animation, timing);
}

function rotate() {
  var svg = document.getElementById("svgID");
  if (svg.dataset.rotated === "1") {
    svg.dataset.rotated = "0";
    anim(svg, 45, 0);
  } else {
    svg.dataset.rotated = "1";
    anim(svg, 0, 45);
  }
}
    #button {
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  box-shadow: none;
  border: none;
}
    <button id="button" onclick="rotate()">
        <svg id="svgID"
        width="100%"
        height="100%"
        viewBox="0 0 142.40739 142.40991"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:svg="http://www.w3.org/2000/svg">
       <defs
          id="defs6" />
        <path
          id="rect234"
          style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:stroke fill markers"
          d="m 85.223081,28.929132 a 4.2333333,4.2333333 0 0 0 -4.233333,4.233333 v 62.801852 l -65.486442,-0.24339 a 4.107912,4.107912 0 0 0 -4.247803,3.96255 4.2333333,4.2333333 0 0 0 4.217313,4.249353 l 65.516932,0.24339 v 62.9295 a 4.107912,4.107912 0 0 0 3.978568,4.23333 4.2333333,4.2333333 0 0 0 4.233334,-4.23333 v -62.89901 l 60.21338,0.22376 a 4.107912,4.107912 0 0 0 4.2478,-3.96255 4.2333333,4.2333333 0 0 0 -4.21731,-4.248833 L 89.20165,95.994807 V 33.162465 a 4.107912,4.107912 0 0 0 -3.978569,-4.233333 z"
          transform="translate(-11.255471,-28.929132)" />
        </svg>
     </button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search