在SVG更改線尺寸與jQuery

我有這個SVG繪製簡單的一行：在SVG更改線尺寸與jQuery

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="80px" height="100px" viewBox="0 0 80 589" enable-background="new 0 0 80 589" xml:space="preserve"> 

<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" x1="0" y1="0" x2="1000" y2="1500"/> 

</svg>

我希望能夠改變X1，Y1，X2和X1作爲滾動位置的函數爲一個網站。我卡住了，因爲我只能改變css屬性，而這些不是。

我試圖沿着這些路線的東西：

$(window).scroll(function() { 
    //calculate how far down the page the user is 
    var $percentageComplete = (($(window).scrollTop()/($("html").height() - $(window).height())) * 100); 
    var svgContainer = d3.select("body").append("svg") 
     .attr("width", 200) 
     .attr("height", 200); 

    var line = svgContainer.append("line") 
     .attr("x1", 15) 
     .attr("y1", '' + $percentageComplete + '') 
     .attr("x2", 30) 
     .attr("y2", 20); 
    document.getElementById("currentValue").innerHTML = $percentageComplete; 

    }); 
    console.log("Ready"); 
});

這沒有工作，我是能夠使滾動持續和改變一個值，因爲我在網站上去了，但我有點當想要將線的座標作爲滾動的函數時被卡住。

謝謝。

來源

2016-03-09 Adrián S. Basave

你問題中的代碼是d3，而不是jQuery。但是假設你在問關於jQuery的問題，它還沒有和SVG一起工作。然而，這應該工作：

$('line')[0].setAttribute('y1', newY1);

或純JS：

document.querySelector('line').setAttribute('y1', newY1);

來源

2016-03-09 02:01:04 Amadan

在SVG更改線尺寸與jQuery

回答

相關問題