如何使用 JavaScript 在 HTML 中放置 SVG 图像文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25772742/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to place SVG image file in HTML using JavaScript
提问by Nada
I have an SVG image file and I want to put it to in HTML page as an SVG. So I still take the advantage of Zoom in/out with high resolution.
我有一个 SVG 图像文件，我想将它作为 SVG 放入 HTML 页面中。所以我仍然利用高分辨率放大/缩小的优势。
Here is my code. I put the SVG inside the , the inside the SVG.
这是我的代码。我把 SVG 放在 , the inside the SVG.
The code run correctly but no SVG appear in the browser.
代码运行正常，但浏览器中没有出现 SVG。
1) How can I show it? 2) Is there any way to place the SVG as SVG with all of its features( I read some question but non of them work with me).
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);
This HTML code is work but when I transfer it to JavaScript it does not ..
这个 HTML 代码是有效的，但是当我将它转移到 JavaScript 时，它不会..
<svg id="svgimg" height="60" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
UPDATE: I can see the SVG as img now: I added the library in order to change to SVG( because I want to change the colour of the lines and rectangle inside the SVG )
更新：我现在可以将 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);
but when I see the inspect it is still img tag not SVG?? I want it as SVG so I can change the colour of the rectangles and the lines
但是当我看到检查时它仍然是 img 标签而不是 SVG ？我想要它作为 SVG 所以我可以改变矩形和线条的颜色
回答by DeeDee
It looks like you're trying to dynamically create your SVG element and then have it display in the browser.
看起来您正在尝试动态创建 SVG 元素，然后将其显示在浏览器中。
Here's a rough cut of how I've done it in the past. This solution uses jQuery's html()function:
这是我过去如何做到的粗略剪辑。此解决方案使用 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());
More precisely, if you wanted to place the SVG at a specific point in the document, such as the div myDiv:
更准确地说，如果您想将 SVG 放置在文档中的特定点，例如 div myDiv：
$('#myDiv').html(svgdiv.html());
$('#myDiv').html(svgdiv.html());
回答by Cohars
after our conversation in the comment, I think I can give you some help. Everything you need to know is here, Iconic does a huge workon SVGs and opensource it.
经过我们在评论中的对话，我想我可以给你一些帮助。您需要知道的一切都在这里，Iconic在 SVG 方面做了大量工作并将其开源。
Let's say you have icon.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>
You can add it in your html like that:
你可以像这样在你的html中添加它：
<img class="svg" data-src="icon.svg">
And you can use SVG Injector
你可以使用SVG Injector
var IMGs = document.querySelectorAll('.svg');
SVGInjector(IMGs);
So you will be replaced by the SVG code. Than, you can style it
所以你会被 SVG 代码取代。比，你可以设计它
svg path {
stroke-width: 1px;
stroke: blue;
fill: transparent;
}
回答by Robert Longson
This line is incorrect
这行不正确
var img = document.createElementNS(svg, 'image');
You have the namespace right for the svg element
您拥有 svg 元素的命名空间
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
so you just need to do the same again for the image i.e.
所以你只需要对图像再次做同样的事情，即
var img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
回答by Martin Zvarík
Use parameters: http://localhost/circle.svg?color=blue
Use inline 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=' '><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;Somebody also mentioned this but using with encodeURI... https://stackoverflow.com/a/42313650/1347572
使用内联 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=' '><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
