Estoy tratando de aplicar un efecto de transición a un svg que tengo, pero no estoy seguro de cómo hacerlo. Básicamente me gustaría aplicar transition: width 2s ease; cuando aumento el tamaño del arco en el siguiente código:
guion:
function polarToCartesian(centerX, centerY, radius, angleInDegrees) { var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0; return { x: centerX + (radius * Math.cos(angleInRadians)), y: centerY + (radius * Math.sin(angleInRadians)) }; } function describeArc(x, y, radius, startAngle, endAngle){ var start = polarToCartesian(x, y, radius, endAngle); var end = polarToCartesian(x, y, radius, startAngle); var largeArcFlag = "0"; if (endAngle >= startAngle) { largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; } else { largeArcFlag = (endAngle + 360.0) - startAngle <= 180 ? "0" : "1"; } var d = [ "M", start.x, start.y, "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y ].join(" "); return d; } function inc() { cc += 30; if (cc > 355) { cc = 1; } document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, 0, cc)); } var cc = 0; window.onload = function() { document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, 0, 5)); document.getElementById("arc2").setAttribute("d", describeArc(150, 150, 70, 180, 10)); };html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <svg> <path id="arc1" fill="none" stroke="pink" stroke-width="20" /> <path id="arc2" fill="none" stroke="#446688" stroke-width="20" /> </svg> <button onClick=inc()>++</button> </body> </html>¿Cómo puedo obtener el atributo d para aplicar esa transición? ¿O hay otra manera de lograr el mismo efecto?
¡Gracias!
Aquí está el ejemplo: https://jsbin.com/jatavoyova/edit?html,js,output
No es necesario calcular arcos si usa pathLength :
Click or Ctrl+Click <arcs style="display:grid;grid:1fr/repeat(3,150px)"> <svg-arc size="1"></svg-arc> <svg-arc size="3" stroke="green"></svg-arc> <svg-arc size="6" stroke="blue"></svg-arc> </arcs> <script> customElements.define("svg-arc", class extends HTMLElement { connectedCallback() { this.render(); this.onclick = (evt) => { let offset = evt.ctrlKey ? -1 : 1; this.setAttribute("size", ~~this.getAttribute("size") + offset); this.render(); } } render() { let size = this.getAttribute("size") || 1; let stroke = this.getAttribute("stroke") || "red"; this.innerHTML = `<svg viewBox="0 0 50 50"> <text x="20" y="30">${size}</text> <circle cx="25" cy="25" r="20" stroke="${stroke}" stroke-width="10" fill="none" pathLength="10" transform="rotate(-90 25 25)" stroke-dasharray="${size} ${10-size}"/></svg>`; } }); </script>