相关疑难解决方法(0)

我想绘制一个如图所示的网格,但我完全不知道我应该从哪里开始.我应该使用SVG还是应该使用Canvas和HTML5以及如何绘制它.
请指导一下.我希望这个网格在其上绘制矩形,圆形或其他图表,我将计算该图的面积,如方形区域.

我有一个SVG图像文件,我想把它作为SVG放在HTML页面中.所以我仍然利用高分辨率放大/缩小的优势.

这是我的代码.我把SVG放在SVG里面.

代码运行正常但浏览器中没有出现SVG.

1)我该如何展示它？2)有没有办法将SVG作为SVG放置其所有功能(我读了一些问题,但没有与我合作).

// this to draw the svg
                 var div = document.createElement("div");
                 div.id="dsvg"; 
                 div.class="cdsvg";
                 div.style.width = "auto";
                 div.style.height = "210px";

                 var link='SVGimage.svg';

                    //creat svg to embed the svg to them
                    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                    svg.setAttribute("height", 210);
                    svg.setAttribute("width", 500);
                    //svg.setAttribute('xlink:href', link );

                     var XLink_NS = 'http://www.w3.org/1999/xlink';

                    var img = document.createElementNS(svg, 'image');
                    img.setAttributeNS(null, 'height', '210');
                    img.setAttributeNS(null, 'width', '500');
                    img.setAttributeNS(XLink_NS, 'xlink:href', link);

                    svg.appendChild(img);


                    var cell3 = row.insertCell(3);
                    div.appendChild(svg);
                    cell3.appendChild(div);

这个HTML代码是可行的,但当我将它转移到JavaScript时,它不会...

<svg id="svgimg" height="60" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  >

更新:我现在可以看到SVG为img:我添加了库以便更改为SVG(因为我想更改SVG内部的线条和矩形的颜色)

  var link='test.svg'; …

我正在寻求绘制一个网格，我将在其上添加一些简单的矩形，再次使用 SVG。在浏览器中查看时，网格应适合单个页面。怀疑我遗漏了一些非常简单的东西，但我是否为此结果编写了 SVG（视口和网格）？即网格？我已经阅读了指定一个视图框的建议，该视图框定义了文档画布的内部坐标系；还可以将高度和宽度属性设置为百分比 (?)。理想的最终结果（最终是一张地图）是有网格线。