如何使用JavaScript将SVG图像文件放在HTML中

Question

我有一个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';
                        var svgframe = document.createElement('img');
                        svgframe.id="svgframe";
                        svgframe.class="svg";
                        svgframe.setAttribute('src',link );

                        var SVGs = document.querySelectorAll('.svg');
                        SVGInjector(SVGs);

但是当我看到检查它仍然是img标签不是SVG ?? 我希望它作为SVG,所以我可以改变矩形和线条的颜色

Answer 1

看起来您正在尝试动态创建 SVG 元素，然后将其显示在浏览器中。

这是我过去的做法的粗略总结。该解决方案使用 jQuery 的html()函数：

    var svgdiv = document.createElement('div');
    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('height', heightVar);
    svg.setAttribute('width', widthVar);
    //Add all your elements to the SVG
    svgdiv.appendChild(svg)
    //the following shows it in a pop-up window, but the write() and html() functions should be what you need.
    window.open().document.write(svgdiv.html());

更准确地说，如果您想将 SVG 放置在文档中的特定点（例如 div ）myDiv：

$('#myDiv').html(svgdiv.html());