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

Question

我有一个 SVG 图像文件，我想将它作为 SVG 放入 HTML 页面。 所以我仍然利用高分辨率放大/缩小的优势。

这是我的代码。 我把 SVG 放在 , the inside the 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());

Answer 2

经过我们在评论中的对话，我想我可以给你一些帮助。 您需要知道的一切都在这里，Iconic在 SVG 方面做了大量工作并将其开源。

假设您有 icon.svg ：

<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
  <path d="M2.47 0l-2.47 3h2v5h1v-5h2l-2.53-3z" transform="translate(1)" />
</svg>

你可以像这样在你的html中添加它：

<img class="svg" data-src="icon.svg">

你可以使用SVG Injector

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

所以你将被 SVG 代码取代。 比，你可以设计它

svg path {
  stroke-width: 1px;
  stroke: blue;
  fill: transparent;
}

Answer 3

这行不正确

var img = document.createElementNS(svg, 'image');

您拥有 svg 元素的命名空间

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

所以你只需要对图像再次做同样的事情，即

var img = document.createElementNS('http://www.w3.org/2000/svg', 'image');

Answer 4

• 使用参数： http://localhost/circle.svg?color=blue

• 使用内联 CSS：

   var s="url(\\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><defs><pattern id='grid' width='"+(37+i)+".79527559055' height='37.79527559055' patternUnits='userSpaceOnUse' style='&#10;'><path d='M 50 0 L 0 0 0 40' fill='none' stroke='gray' stroke-width='1'/></pattern></defs><rect width='100%' height='100%' fill='url(#grid)'/></svg>\\") no-repeat"; document.getElementsByTagName('HTML')[0].style.background=s;

  有人也提到了这一点，但与 encodeURI 一起使用... https://stackoverflow.com/a/42313650/1347572