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

How to place SVG image file in HTML using JavaScript

本文关键字：HTML 文件 图像 何使用 JavaScript SVG      更新时间：2023-09-26

我有一个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，这样我就可以更改矩形和线的颜色

经过我们在评论中的对话，我想我可以给你一些帮助。你需要知道的一切都在这里，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;
}

看起来您正在尝试动态创建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());

此行不正确

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');

  • 使用参数：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

相关文章：