JavaScript，SVG，HTML和CSS

如果可能，我真的想讓這個工作沒有jQuery。我試圖通過與滑塊JavaScript的滑塊來動畫名爲「嘴巴」的SVG路徑，所以路徑將無縫移動以顯得傷心或快樂。JavaScript，SVG，HTML和CSS

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

來源

2015-11-04 awnstosh

請編輯您的問題標題提問而非列表標籤。 – isherwood

你需要什麼特別的幫助？（如何用滑塊更新它，找出路徑的正確點，還有其他的東西？）因爲這是純粹的JS，你使用的瀏覽器是什麼？ – whrrgarbl

只是一個簡單的參考：CDATA腳本標籤曾經解決了某些問題，但需要CDATA標籤的瀏覽器和支持SVG的瀏覽器都是零。（如果你想... *不正確*可能仍然需要* ...讓HTML解析爲XML。） – Katana314

我只使用Javascript功能來幫你做了一個可能的解決方案：

爲了得到一個悲或喜的臉在視覺上正確的外觀，我調整了分鐘，你輸入的最大值，如下：

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

我用得到嘴的SVG路徑：

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"); 
    });

在上面的代碼，你可以用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路徑進行優化。

Live demo

來源

2015-11-04 17:25:46

你在你的JavaScript代碼的幾個問題。

您的getElementById調用使用id =「smile」，但HTML使用的是id =「mouth」。

當它應該使用索引1時，您的getItem調用使用索引2.該路徑只有兩個段（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; 
    }

來源

2015-11-04 18:14:54

JavaScript，SVG，HTML和CSS

回答

相關問題