我要实现的总体任务是加载svg映像文件,修改颜色或文本某处,然后将其绘制到html5 canvas上(大概是drawimage(),),但是任何合理的选择都可以)。
我遵循了有关如何加载和修改JavaScript中的SVG文件的另一个Stackoverflow问题的建议,这是这样的:
<object class="svgClass" type="image/svg+xml" data="image.svg"></object>
紧随其后的JavaScript
document.querySelector("object.svgClass").
getSVGDocument().getElementById("svgInternalID").setAttribute("fill", "red")
这有效。我现在在我的网页中显示了修改的SVG。
,但我不想仅显示它 - 我想将其绘制为HTML5画布更新的一部分,例如:
ctx.drawImage(myModifiedSVG, img_x, img_y);
如果我尝试存储getvgdocument()的结果并将其作为myModifiedSvg传递,我只会收到一条错误消息。
如何使我的修改后的SVG呼叫HTML5画布?
编辑:我可以通过这样做在HTML5画布上绘制SVG图像:
var theSVGImage = new Image();
theSVGImage.src = "image.svg";
ctx.drawImage(theSVGImage, img_x, img_y);
那太好了,但是我不知道如何以这种方式修改我已加载的SVG图像中的文本/颜色!如果有人可以告诉我如何进行修改,那也将是一个解决方案。我不与浏览对象HTML标签有关。
为了一次拍摄,您可以重建新的SVG文件,将其加载到an&lt; img>中,然后再次将其绘制在画布上:
async function doit() {
const ctx = canvas.getContext('2d');
const images = await prepareAssets();
let i = 0;
const size = canvas.width = canvas.height = 500;
canvas.onclick = e => {
i = +!i;
ctx.clearRect(0, 0, size, size);
ctx.drawImage(images[i], 0,0, size, size);
};
canvas.onclick();
return images;
}
async function prepareAssets() {
const svgDoc = await getSVGDOM();
// There is no standard to draw relative sizes in canvas
svgDoc.documentElement.setAttribute('width', '500');
svgDoc.documentElement.setAttribute('height', '500');
// generate the first <img> from current DOM state
const originalImage = loadSVGImage(svgDoc);
// here do your DOM manips
svgDoc.querySelectorAll('[fill="#cc7226"]')
.forEach(el => el.setAttribute('fill', 'lime'));
// generate new <img>
const coloredImage = loadSVGImage(svgDoc);
return Promise.all([originalImage, coloredImage]);
}
function getSVGDOM() {
return fetch('https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg')
.then(resp => resp.text())
.then(text => new DOMParser().parseFromString(text, 'image/svg+xml'));
}
function loadSVGImage(svgel) {
// get the markup synchronously
const markup = (new XMLSerializer()).serializeToString(svgel);
const img = new Image();
return new Promise((res, rej) => {
img.onload = e => res(img);
img.onerror = rej;
// convert to a dataURI
img.src= 'data:image/svg+xml,' + encodeURIComponent(markup);
});
}
doit()
.then(_ => console.log('ready: click to switch the image'))
.catch(console.error);
<canvas id="canvas"></canvas>
但是,如果您要使用很多帧进行操作,并期望它可以动画...
您必须将SVG转换为帆布绘图操作。
上面的方法是异步的,因此您无法可靠地生成新图像,并准备好将其绘制在单个帧中。您需要提前存储其中的一些,但是由于加载图像需要多长时间是随机的(至少应该是),这可能是一场真正的编程噩梦。
再加上浏览器在加载一个全新的SVG文档时,每个帧(是的,即使加载AN&lt; img>),浏览器也将拥有一个全新的SVG文档(是的,浏览器也确实加载了SVG文档画布,最后将其从内存中删除,而记忆将立即填充,您将没有太多免费的CPU来做其他事情。
因此,这里最好的可能是解析您的SVG并将其转换为CanvasRenderingContext2d绘图操作=>自己绘制。
这是可以实现的,此外,现在我们可以将d
属性直接传递到PATH2D对象构造器中,并且大多数SVG对象都在Canvas2d API中具有对应关系(我们甚至可以使用SVG过滤器),但这仍然是很多工作。
因此,您可能想查看这样做的库。我本人不是图书馆的专家,我不推荐任何图书馆,但是我知道Canvg这样做是因为很长时间以来,我只是不知道他们是否确实以可重复使用的方式暴露了JS对象。我知道Fabric.js确实如此,但它也带有许多您可能不需要的其他功能。
选择是您的。