Menu
I really want to get this working with no jQuery if possible. I'm trying to make the SVG path called "mouth" be animated through the slider with JavaScript, so the path will seamlessly move to appear sad or happy.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Pattern editor">
<meta name="keywords" content="HTML,CSS,SVG,JavaScript">
<script>
< ![CDATA[
function refresh() {
var slider1 = parseInt(document.getElementById("slider1").value);
if (slider1 > 0) {
var path = document.getElementById('smile');
var segments = path.pathSegList;
segments.getItem(2).y = +10;
} else if (slider1 <= 0) {
var path = document.getElementById('smile');
var segments = path.pathSegList;
segments.getItem(2).y = -10;
}]] >
</script>
</head>
<body onload="refresh()">
<h1>trying to move the line</h1>
<div>Circle size:
<input id="slider1" type="range" min="-10" max="10" onchange="refresh()" />
</div>
<svg width="600" height="600">
<circle id="face" cx="90" cy="90" r="70" stroke="black" stroke-width="1" fill="yellow" />
<path id="mouth" d="M45,110 C80,110 140,110 150,110" style="fill:none;stroke:deeppink;stroke-width:3" </svg>
</body>
</html>
683
I've made a possible solution by using only Javascript to help you:
To get visually a proper appearance of a sad or happy face, I adjusted the min and max values of your input, as follow:
<input id="slider1" type="range" min="0" max="20" />
I'm getting the mouth's svg path by using:
var mouth = document.getElementById("mouth");
To make the slider run with the proper event, I'm declaring an EventListener, as follow:
slider.addEventListener("change", function() {
console.log(this.value);
mouth.setAttribute("d", "M45,110 C80," + 10 * this.value + " 140,110 150,110");
});
In the code above, you can get the current value of the slider with this.value.
Then, by using mouth.setAttribute("d", "values..."), you can overwrite in realtime the mouth's svg path values.
Something like this:
(function() {
var slider = document.getElementById("slider1");
var mouth = document.getElementById("mouth");
slider.addEventListener("change", function() {
console.log(this.value);
mouth.setAttribute("d", "M45,110 C80," + 10 * this.value + " 140,110 150,110");
});
})();<h1>trying to move the line</h1>
<div>Circle size:
<input id="slider1" type="range" min="0" max="20" />
</div>
<svg width="600" height="600">
<circle id="face" cx="90" cy="90" r="70" stroke="black" stroke-width="1" fill="yellow" />
<path id="mouth" d="M45,110 C80,110 140,110 150,110" style="fill:none;stroke:deeppink;stroke-width:3" />
</svg>Still, this first solution can be optimized by adjusting the mouth's svg path.
Live demo
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
