当前位置: 首页 > 面试题库 >

在HTML5画布上绘制SVG文件

麻超
2023-03-14
问题内容

是否有将SVG文件绘制到HTML5画布上的默认方法?GoogleChrome支持将SVG加载为图像(并简单地使用drawImage),但是开发者控制台会对此进行警告resource interpreted asimage but transferred with MIME type image/svg+xml

我知道将SVG转换为canvas命令的可能性,但是我希望这不是必需的。我不在乎较旧的浏览器(因此,如果FireFox 4和IE 9支持某些功能,那就足够了)。


问题答案:

编辑2019年12月16日

现在所有主要浏览器都支持Path2D

编辑2014年11月5日

现在,您可以 在某些(但不是全部)浏览器中*ctx.drawImage绘制具有.svg源的HTMLImageElement
。Chrome,IE11和Safari可以工作,Firefox可以解决一些错误(但每晚都修复了这些错误)。
*

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";

这里的例子。您应该在画布上看到一个绿色正方形。页面上的第二个绿色正方形是<svg>插入DOM中以供参考的相同元素。

您还可以使用新的Path2D对象绘制SVG(字符串)路径。换句话说,您可以编写:

var path = new Path2D('M 100,100 h 50 v 50 h 50');
ctx.stroke(path);

旧后代答案:

没有任何一种本机可允许您在画布中本机使用SVG路径。您必须转换自己或使用一个库来为您做。



 类似资料:
  • 我想在画布上画一段视频。为了实现这一点,我在Javascript中捕获onMouseDown和onMouseUp事件,以获得每个事件的x和y坐标(我需要在画布中设置视频的位置、宽度和高度)。 因此,每次我在画布上绘制视频时,我创建的上一个视频都应该停止,并且必须播放新的视频。两个问题: 1)视频不播放(功能只画第一帧),但他的音频可以 2) 如何停止以前绘制的视频? 演示:http://jsfid

  • 问题内容: 我需要知道如何在画布上绘制多边形。不使用jQuery或类似的东西。 问题答案: 使用和创建一个路径:

  • 我想用javascript在响应画布上画一个圆圈。我得到了画布的宽度和高度,但由于div标签的宽度和高度%,我能够正确地画出圆圈。div标记的宽度和高度以%为单位,因为我想在单个页面上显示5个画布。是否有其他方法可以在一页上放置5块画布,并使用画布的高度和宽度在每个画布上画一个圆圈?还有一件事,我不想要绝对位置,因为根据浏览器的宽度,我想要改变画布的位置 图片:192.168。10.29/1.巴布

  • 实际上,我可以使用函数来完成。我从“HTML5画布-如何在图像背景上画一条线?”中得到的东西。但是我需要在不使用from函数的情况下绘制图像,如下所示:

  • 问题内容: 好吧,我需要一些有关将.svg文件/图像转换为.png文件/图像的帮助… 我的页面上显示了一个.svg图像。它保存在我的服务器上(.png文件)。我需要按需将其转换为.png文件(单击按钮),然后将.png文件保存在服务器上(我将通过.ajax请求执行此操作)。 但是问题是转换。 我阅读了很多有关html5 Canvas的内容,这些内容可能可以帮助我做我现在需要做的事情,但是我找不到解

  • 有一个代码这行,但我不知道怎么做,我只能做一个2行在这同一时间。