如何使用JavaScript将SVG图像文件放在HTML中 [英] How to place SVG image file in HTML using JavaScript
问题描述
我有一个SVG图像文件,我想把它放在HTML页面作为一个SVG。所以我仍然使用高分辨率放大/缩小的优势。
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里面,在SVG里面。
Here is my code. I put the SVG inside the , the inside the SVG.
代码可以正常运行,但没有SVG出现在浏览器中。
The code run correctly but no SVG appear in the browser.
1)如何显示?
2)有什么办法把SVG作为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).
// 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时,
This HTML code is work but when I transfer it to JavaScript it does not ..
<svg id="svgimg" height="60" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
UPDATE:
我现在可以看到SVG为img:
我添加了库以更改为SVG(因为我想更改行的颜色, SVG内的矩形)
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 )
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,所以我可以改变矩形的颜色和线
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
推荐答案
认为我可以给你一些帮助。您需要知道的一切都是这里,Iconic在SVG上做了大量工作,并打开它。
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 work on SVGs and opensource it.
假设你有icon.svg:
Let's say you have 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中:
You can add it in your html like that:
<img class="svg" data-src="icon.svg">
您可以使用 SVG Injector
var IMGs = document.querySelectorAll('.svg');
SVGInjector(IMGs);
因此,您将被SVG代码替换。
比你可以风格化
So you will be replaced by the SVG code. Than, you can style it
svg path {
stroke-width: 1px;
stroke: blue;
fill: transparent;
}
这篇关于如何使用JavaScript将SVG图像文件放在HTML中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!