I am trying to apply a transition effect to an svg I have, but I am not sure how to do this.
Basically I would like to apply transition: width 2s ease; when I increase the arc size in the following code:
script:
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>
How can I get the attribute d to apply that transition? Or is there another way to achieve the same effect?
Thank you!
Here's the example: https://jsbin.com/jatavoyova/edit?html,js,output
No need to calculate arcs if you use 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>