线不完整svg

-1

我试图动态地创建svg线。但是，这条线从一开始就不出现，我不知道我在做什么错。下面是代码和的jsfiddle：https://jsfiddle.net/rafaelcb21/h9qx4ero/2/线不完整svg

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script> 
<style> 
    .container{ 
     display:flex; 
    } 

    .divsvg{    
     width: 150px; 
     position:relative; 
    } 

    svg{ 
     position:absolute; 
     width:100%; 
     height:100%; 
     top:0px; 
    } 

    .table { 
     border-collapse: collapse;  
     margin-bottom: 100px; 
    } 

    .td { 
     border: 1px solid #000 
    } 

</style> 
</head> 
<body> 

<div class="container"> 
    <div> 
     <table class='table'> 
      <tr><td class='td'>Table 1</td></tr> 
      <tr><td class='td' id="valueA">value A</td></tr> 
     </table> 
    </div> 
    <div class="divsvg"> 
     <svg> 
      <line id="line" style="stroke:rgb(255,0,0)"></line> 
     </svg> 
    </div> 
    <div> 
     <table class='table'> 
      <tr><td class='td'>Table 2</td></tr> 
      <tr><td class='td' id="valueB">value B</td></tr> 
     </table> 
    </div> 
</div> 

<div id="out"></div> 
<div id="in"></div> 
<br> 
<div id="log"></div> 

<script> 
    var valueA= $("#valueA"); 
    var valueA_pos = valueA.offset(); 
    valueA_pos.right = valueA_pos.left + valueA.width(); 

    var valueB= $("#valueB"); 
    var valueB_pos = valueB.offset(); 
    valueB_pos.right = valueB_pos.left + valueB.width(); 

    $('#line').attr({ 
     "x1": valueA_pos.right, 
     "y1": valueA_pos.top, 
     "x2": valueB_pos.left, 
     "y2": valueB_pos.top 
    }); 

    $("#out").text("outX: " + valueA_pos.right + ", outY: " + valueA_pos.top); 
    $("#in").text("inX: " + valueB_pos.left + ", inY: " + valueB_pos.top); 

    $(document).on("mousemove", function(event) { 
     $("#log").text("pageX: " + event.pageX + ", pageY: " + event.pageY); 
    }); 

</script> 
</body> 
</html>

UPDATE

我只需要改变对于x1 = 0和x 2 = 150的x1和x2，因为这是CSS div的尺寸class svg https://jsfiddle.net/rafaelcb21/h9qx4ero/3/

$('#line').attr({ 
     "x1": 0, 
     "y1": valueA_pos.top, 
     "x2": 150, 
     "y2": valueB_pos.top 
    });

来源

2016-03-06 rafaelcb21

您的SVG位于两个表之间。你应该画SVG中x = 0的行到x = svg.width。但是，您正在SVG中的x = table1.width处开始您的行。

来源

2016-03-06 08:18:56

线不完整svg

回答

相关问题