小编Nad*_*ada的帖子

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

我有一个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);
Run Code Online (Sandbox Code Playgroud)

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

<svg id="svgimg" height="60" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  >
Run Code Online (Sandbox Code Playgroud)

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

  var link='test.svg'; …
Run Code Online (Sandbox Code Playgroud)

html javascript css html5 svg

7
推荐指数
1
解决办法
8114
查看次数

标签 统计

css ×1

html ×1

html5 ×1

javascript ×1

svg ×1