Question

我试图在其中一个表格单元格中绘制一个svg图像，但它根本不起作用。我看到div但没有svg图像。如果我从html代码（）创建div但是从javascript它不起作用它是有效的.. 如何从javascript代码中绘制SVG HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">

    <style type="text/css">
      @import "jquery/jquery.svg.css";
      #svgbasics { width: 400px; height: 300px; border: 1px solid #247; }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.svg.js"></script>

  <script src="InitialSVG.js"></script>
    <script src="draw.js"></script>

  </head>
  <body style="background-color: #ffefdb;">


    <table id="GTable" style="width: 100%; background-color: white;" border="1">
      <tbody>
        <tr>
          <td style="width: 152px;">ID</td>
          <td style="margin-left: 18px; width: 150px;">Gene description ( name )</td>
          <td style="width: 152px; "> model</td>
        </tr>
      </tbody>
    </table>


  </body>
</html>

这里是代码：（draw.js）//在其他函数上重复调用此函数来动态创建表，我删除了循环，但同样的问题发生了。

onLoad : function addRow(tableID ,Name, ID) {


            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
 // first col
            var cell1 = row.insertCell(0);
            cell1.innerHTML= ID;

 //secnd
            var cell2 = row.insertCell(1);
            cell2.innerHTML = Name;
 //third

            var cell3 = row.insertCell(2);
            var div = document.createElement("div");
            div.id="svgbasics";
            div.style.width = "400px";
            div.style.height = "400px";
            cell3.appendChild(div);

        }

（InitialSVG.js）

$(function() {
    $('#svgbasics').svg({onLoad: drawInitial});
  });

      function drawInitial(svg) {
    svg.rect(150, 50, 100, 50, 10, 10, {fill:'green'}); 
}

Answer 1

我假设您添加了多行。因此，看起来您应该为每一行的DIV赋予其唯一ID。此外，脚本块 InitialSVG.js 在 draw.js 之前加载。尝试切换它们。

e.g。

div.id="svgbasics"+rowCount

或者

div.id="Div"+ID

Keith Wood JQuery SVG：SVG没有在div中绘制

1 个答案: