JavaScript, SVG, HTML, and CSS

Question

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>

Please edit your question title to ask a question and not list tags. — isherwood
– isherwood, Commented Nov 4, 2015 at 16:58
What specifically do you need help with? (How to update it with the slider, figuring out the proper points for the path, something else?) Since this is pure JS, what browser are you using? — user812786
– user812786, Commented Nov 4, 2015 at 17:07
Just an FYI: CDATA script tags once solved certain issues, but the intersection of browsers that needed that CDATA tag, and browsers that support SVGs, is nil. (It might still be needed if you want to...*incorrectly*...let your HTML be parsed as XML.) — Katana314
– Katana314, Commented Nov 4, 2015 at 19:04

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2015-11-04 17:44:51Z

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

Bobby Orndorff · Accepted Answer · 2015-11-04 18:14:54Z

You have several problems in your JavaScript code.

Your getElementById call is using id="smile" but the HTML is using id="mouth".

Your getItem call is using index 2 when it should be using index 1. The path only has two segments (moveTo command and curveTo command).

You are assigning new value to y (which is the end point of curve) when you probably should be assigning new values to y1 and y2 (which are the control points that define the curve).

You are assigning new values of +10 and -10. You should probably me assigning new values based on a combination of slider value and edge of mouth.

The following is a possible solution that fixes the above errors.

    function refresh() {
        var sliderValue = parseInt(document.getElementById("slider1").value);
        var path = document.getElementById('mouth');
        var segments = path.pathSegList;
        segments.getItem(1).y1 = segments.getItem(1).y + sliderValue;
        segments.getItem(1).y2 = segments.getItem(1).y + sliderValue;
    }

Collectives™ on Stack Overflow

JavaScript, SVG, HTML, and CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related