svg图片在浏览器或小程序中不显示

前端 · ez · 于 1个月前 发布 · 205 次阅读

基础知识

Content Type

⚠️ 您必须设置 响应的Content-Type HTTP标头

image/svg+xml

浏览器支持兼容性

Internet Explorer 9及以后版本可以本机显示SVG。在写本文时,Firefox、Chrome、Safari、Opera和Android浏览器已经能够原生地显示SVG有一段时间了。iOS版的Safari、Opera的迷你和移动浏览器,以及Android版的Chrome也都是如此。

SVG 在Web中显示

在Web浏览器(例如Chrome,Firefox和Internet Explorer)中显示SVG可以通过浏览器指向SVG文件的URL,将SVG嵌入HTML页面,使用iframe元素,使用img元素等方法

在Web浏览器(例如Chrome,Firefox和Internet Explorer)中显示SVG可以通过以下几种方式完成:

  • 浏览器指向SVG文件的URL.

  • 将SVG嵌入HTML页面

您可以通过以下几种方法将SVG图像嵌入HTML文件中:

  • 使用iframe元素

  • 使用img元素

  • 使用SVG图像作为背景图像.

  • 使用svg元素

  • 使用embed嵌入元素

iframe框架

如果您输入SVG图片的URL,由于浏览器可以显示SVG图片,因此您也可以使用来在HTML页面iframe中包含SVG图片。这是一个示例:

<iframe src="mySvgImage.svg" width="200" height="200" >

img

img就像使用任何其他类型的图像一样, 使用元素嵌入SVG图像也是如此。您可以在img元素的src属性中写入SVG图片的URL ,如下所示:

<img src="/svg/circle-element-1.jsp">

SVG图像会像其他任何图像一样显示在HTML页面中.

SVG作为背景图像

由于浏览器将SVG图像与位图图像一样对待,因此可以通过CSS将SVG图像用作背景图像。这是一个示例:

div {
    background-image: url('my-svg-image.svg');
    background-size : 100px 100px;
}

可能需要为SVG图像设置背景大小,以告诉浏览器如何缩放它。你可以在我的CSS背景图像教程中了解更多背景图像。

HTML内的svg元素

使用SVG元素嵌入SVG图像可以直接在HTML页面中嵌入SVG元素,如下所示:

<div><svg>
    <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
    </svg></div>

这里的div元素只是为了说明svg元素可以直接嵌入到HTML中。不过,svg元素不必嵌入到div元素中。

使用SVG元素,您可以直接将SVG嵌入到HTML页面中,而不是将SVG图像放在它自己的文件中。可以通过向SVG元素添加宽度width和height高度属性来设置SVG图像的宽度和高度。

通过使用svg元素,还可以在浏览器中使用JavaScript直接生成svg。D3 JavaScript API非常擅长于此。jQuery JavaScript API也可以做到这一点。

使用svg元素,您还可以使用CSS对svg及其子元素进行样式设置,就像您对任何其他HTML所做的那样。注意,SVG元素的某些CSS属性的名称有时与HTML元素的名称不同。

embed

在SVG的早期,您可以使用embed元素嵌入SVG图像。那时,并不是所有浏览器都支持SVG。今天,我建议使用img或svg元素。这里是一个实例嵌入元素的历史原因的实例:

<embed src="/svg/simple-example-1.jsp"
       width="300" height="220"
       type="image/svg+xml"
       pluginspage="http://www.adobe.com/svg/viewer/install/" />

将该元素放在HTML文件中SVG图像显示的位置。src属性应该指向SVG图像的URL。

请注意pluginspage属性。这对于不能原生显示SVG的旧浏览器来说是必要的。这些浏览器需要Adobe的SVG浏览器插件来显示图像。在Internet Explorer 7和Firefox 3.0.5中,这个属性是不必要的,但包含它也无妨。

共收到 0 条回复
没有找到数据。
添加回复 (需要登录)
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册