如何使用 javascript 计算 svg 转换的时间

Question

在此示例中，单击 svg-plus 按钮会转换为关闭按钮，反之亦然，使用

svg.setAttribute("transform","rotate(45)");

是否可以安排这一转变的时间，使其不仅仅是从一个转变到另一个转变，而是一个平稳的过渡？

这是例子：

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("变换",旋转(45)")`:

Answer 1

您需要使用CSS属性

animate

。

下图展示了一个单向/一次性的动画。 （一旦点击它就不会返回或进一步动画）

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>