行不完整 svg

Question

我正在尝试动态创建 svg 线条。但是，这条线从一开始就没有出现，我也不知道自己做错了什么。下面是代码和 jsFiddle：https://jsfiddle.net/rafaelcb21/h9qx4ero/2/

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

更新

我只需要将 x1 和 x2 更改为 x1=0 和 x2=150，因为这是 css div class svg https://jsfiddle.net/rafaelcb21/h9qx4ero/3/

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

Answer 1

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

行不完整 svg

Line incomplete svg

jquery

svg

line

flexbox