svg图片在HTML中不显示的解决办法
前端页面开发中,svg格式的图片直接在浏览器可以正常显示,但是在html中就无法正常显示,直接引用和写在样式中都不行。
通过这种情况下,svg里面的图形结构应该是位图生成的,而不是矢量图生成的。可以尝试用以下方法加以解决:
用文本编辑工具将svg图片打开,接着将image标签下的xlink:href="data:img/png;base64
, 改成xlink:href="data:image/png;base64
即可(只需要将img
改成image
就可以了)
如下图,把图中的img
改成image
就可以了
相关内容
-
详解CSS3+SVG滤镜实现不规则边框的方法
本篇文章将介绍一种配合SVG滤镜实现各种不规则图形添加边框的小技巧。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。需求背景,给不规则图形添加边框在我们日常开发...
-
css如何改变svg颜色
在css中,可以使用stroke属性改变svg颜色,只需要给svg中的polyline标签设置“stroke:颜色值”样式即可。stroke属性定义一条线,文本或元素轮廓颜色,...
-
css怎么显示svg图片
显示方法:1、使用embed标签,语法“<embedsrc="svg图片地址">”;2、使用object标签,语法“<objectdata...
-
给文字添加渐变、描边、投影效果的两种方式(CSS和SVG)
本篇文章给大家介绍一下使用CSS和SVG给文字添加渐变、描边、投影效果的方法,希望对大家有所帮助!在一些web活动页中经常能看到特殊处理的标题文字,比如这样的暂时忽略掉特殊字体...
-
如何在CSS中使用SVG图标
如何在CSS中使用SVG图标,其实这个问题在之前的文章svg图标不要转成base64,而是转成DataURI已经写的非常详细了。没有看过的建议看一下,再住下看。那么这篇文章算是...
-
svg图标不要转成base64,而是转成DataURI
以前做项目时,有些个别图标想写在css中,又不想用图片,通常都是使用svg转成base64,然后在css里面写上一大坨代码。最近才发现一篇好文章,才发现svg图标转成DataU...
-
css中margin的4个属性顺序
在CSS中,margin 属性的四个值可以按照以下两种方式来指定:按照顺时针方向依次指定上、右、下、左四个方向的外边距值。例如:margin:10px20px15px5px;/...
-
css中padding四个值的顺序
当你使用padding属性来设置元素的内边距时,可以按照以下两种方式来指定四个值:按照顺时针方向依次指定上、右、下、左四个方向的内边距值。例如:padding:10px20px...
-
微信手机弹幕/手持弹幕怎么弄
有很多朋友问:手机弹幕怎么弄?在这里给大家分享一下,手机弹幕一般是小程序制作的,不用麻烦的再去下载APP。在这里给大家说一下,手机弹幕和手持弹幕其实是说的一个东西,只是叫法不同...
-
JS中函数(function)的定义以及几种用法
在JavaScript中,函数(function)是一种可重复使用的代码块,用于执行特定的任务。函数可以接受参数(也称为形式参数),执行一系列的操作,并返回一个值。以下是定义函...