在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

回答

相关问题