css svg不显示不出来怎么办


本文摘自PHP中文网,作者藏色散人,侵删。

css svg不显示不出来的解决办法:1、使用<embed>标签引入svg文件;2、使用<object>标签引入svg文件;3、使用<iframe>标签引入svg文件。

本教程操作环境:Dell G3电脑、Windows7系统、HTML5&&CSS3版本。

推荐:《css视频教程》

当html引入svg文件却不显示,可能由于svg不是所有浏览器都支持,firefox, chrome支持,ie有的低版本不支持。

解决方案:

使用<embed> 标签

<embed> 标签被所有主流的浏览器支持,并允许使用脚本。【推荐:html在线手册】

注:当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法!然而,如果需要创建合法的 XHTML,就不能使用 <embed>。任何 HTML 规范中都没有 <embed> 标签。

例如:(需要下载adobe的svg viewer插件来显示)

1

2

3

<embed src="rect.svg" width="300" height="100"

type="image/svg+xml"

pluginspage="http://www.adobe.com/svg/viewer/install/" />

使用<object> 标签

它是 HTML 4 的标准标签,被所有较新的浏览器支持。它的缺点是不允许使用脚本。

注:假如您安装了最新版本的 Adobe SVG Viewer,那么当使用 <object> 标签时 SVG 文件无法工作(至少不能在 IE 中工作)!

1

2

3

<object data="rect.svg" width="300" height="100"

type="image/svg+xml"

codebase="http://www.adobe.com/svg/viewer/install/" />

使用 <iframe> 标签

<iframe> 标签可工作在大部分的浏览器中。

阅读剩余部分

相关阅读 >>

css3代码和css有不同吗

巧用css将背景图像固定在视口

css如何去掉color值

css如何添加下划线

css有超文本标记选择器吗

如何改变css伪元素的样式

css怎么设置分割线

css怎么设置div随着窗口大小变换

css ul 不换行怎么实现

css如何设置透明

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...