logo标签列表

JavaScript、SVG、HTML和CSS

javascripthtmlsvg
5

如果可能的话，我希望无需jQuery就能实现。我正试图通过JavaScript让名为“mouth”的SVG路径通过滑块动画移动，以便路径可以无缝地移动以呈现悲伤或快乐的状态。

<!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
请编辑您的问题标题，提出问题而不是列出标签。 - isherwood
你需要什么具体帮助？（如何使用滑块更新它，找出路径的正确点，还是其他什么？）由于这是纯JS，你使用的是哪个浏览器？ - user812786
只是提醒一下：CDATA脚本标签曾经解决了某些问题，但需要使用该CDATA标签的浏览器和支持SVG的浏览器之间的交集为零。（如果您想要错误地将HTML解析为XML，则仍可能需要它。） - Katana314
感谢您的帮助。 - awnstosh
2个回答
1
我已经使用纯JavaScript为您提供了一种可能的解决方案：
为了在视觉上获得适当的悲伤或快乐表情，我调整了您的输入的最小值和最大值，如下所示：
<input id="slider1" type="range" min="0" max="20" />

我正在使用以下代码获取口的svg路径：

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命令）。

当您可能应该将新值分配给定义曲线的控制点y1和y2时，您正在将新值分配给y（曲线的结束点）。

您正在分配+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;
    }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接