All geek questions in one place

JavaScript, SVG, HTML and CSS

I really want this work to work without jQuery , if possible. I am trying to make an SVG path called “mouth” animated through a JavaScript slider , so the path will be easy to 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>
+4
source share
2 answers

I made a possible solution using only Javascript to help you:

To get the visual appearance of a sad or happy face, I adjusted the minimum and maximum values ​​of your input, as shown below:

<input id="slider1" type="range" min="0" max="20" />

I get the svg path for the mouth using:

var mouth = document.getElementById("mouth");

, EventListener :

slider.addEventListener("change", function() {
    console.log(this.value);
    mouth.setAttribute("d", "M45,110 C80," + 10 * this.value + " 140,110 150,110");
  });

this.value. , mouth.setAttribute("d", "values..."), svg .

- :

(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>

, , svg .

+1

JavaScript-.

getElementById id = "smile", HTML id = "mouth".

getItem 2, 1. ( moveTo curveTo).

y ( ), , , y1 y2 ( , ).

+10 -10. , .

, .

    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;
    }
+1

Source: https://habr.com/ru/post/1614485/

More articles:


All Articles