html 直接使用svg图片不能显示_教程

html 直接使用svg图片不能显示是设置错误造成的，解简慧决方法为：

1、点击电脑开始菜单，找到Inscape工具并点击打开。

2、在Inscape工具编辑界面，绘制两个圆形，设置不同半径和不同兆咐顷颜色填充。

3、设置完毕后，将其导出成SVG格式，存储到桌面上。

4、通过快捷方式打开HBuilderX工具，并新建Web项目，将svg图片复制到项目指定目录下，然后新建一个静态页面。

5、在body标签内，族陆添加一个embed标签，将SVG图片引入到页面里。

6、保存代码并直接使用浏览器预览，可以查看到SVG图片效果。

这种情况一般是由于svg中设定的画布的宽度和高度是百分比（贺则通常是100%），这样在html中就会以一裂哪个禅源棚默认的、固定的宽度和高度（300*150）来显示。解决的办法有两种，第一种是把svg中的画布宽度和高度设为一个固定值，比如（假定宽为400，高为200）：

第二种办法就是不改svg文件，而是修改html中的img标签，比如：

这种方法更灵活，推荐使用。

欢迎分享，转载请注明来源：内存溢出

html 直接使用svg图片不能显示