Keith Wood JQuery SVG：SVG 未在 div 中绘制答案

【问题标题】：Keith Wood JQuery SVG: the SVG does not drawn in the divKeith Wood JQuery SVG：SVG 未在 div 中绘制
【发布时间】：2014-02-25 11:35:36
【问题描述】：

我试图在其中一个表格单元格内绘制 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'}); 
}

【问题讨论】：

标签： javascript jquery html css svg

【解决方案1】：

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

例如

div.id="svgbasics"+rowCount

或者

div.id="Div"+ID

【讨论】：