分享html网页引入svg图片的4种方法

这篇具有很好参考价值的文章主要介绍了分享html网页引入svg图片的4种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

分享html网页引入svg图片的4种方法

本文主要介绍了html网页引入svg图片的4种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着微点阅读小编来一起学习学习吧

web应用开发使用svg图片,总结了下,可以有如下4种方式:

1. 直接插入页面。
2. img标签引入。
3. css引入。
4. object标签引入。

1. 直接插入页面

在html页面,可以直接使用svg标签。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <!-- 一个svg图片 -->

        <svg width="200" height="150" style="border: 1px solid steelblue">

            <!-- 里面有一个矩形 -->

            <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>

        </svg>

    </body>

</html>

运行效果:

2. img标签引入

除了在网页里直接写svg标签,也可以通过img引入,就像引入jpeg、png图片一样。

1)新建svg图片

那么我们就要先新建一个svg图片文件,我们把上面直接写在网页里的svg拿来用:

1

2

3

<svg xmlns="SVG namespace" width="200" height="150">

    <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>

</svg>

这边内容有两点不一样:

1. 需要声明命名空间 xmlns 这个属性,命名空间可以本文尾部列出的参考资料。
2. 移除了原先写在 svg 标签上的样式,style="border: 1px solid steelblue"。

把内容保存到test.svg文件,这个就是一张图片文件了,可以尝试在浏览器打开看看。

2)使用img标签引入

假设test.svg和网页文件在同一个目录下:

1

<img src="test.svg" style="border: 1px solid steelblue" />

和引入jpeg、png类似,直接src属性设置图片路径即可,另外我们把原先在svg的样式移到了img标签这边。

3. css引入

css引入就是把图片当成背景图引入:

1

2

3

4

5

6

7

8

9

<style type="text/css">

    .svg {

        width: 200px;

        height: 150px;

        border: 1px solid steelblue;

        background-image: url(test.svg); // 当成背景引入

    }

</style>

<div class="svg"></div>

4. object引入

和img引入类似,需要一个svg文件,然后用属性data引入:

1

<object data="test.svg" style="border: 1px solid steelblue"></object>

运行效果和上面类似,就不再贴图。

其他标签

其他标签如:embed、iframe标签虽然也可以引入,但是不推荐使用了

转载自:微点阅读   https://www.weidianyuedu.com文章来源地址https://www.toymoban.com/news/detail-490476.html

到了这里,关于分享html网页引入svg图片的4种方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • jquery将网页html文档导出为pdf图片

    2024年02月21日
    浏览(33)
  • html页面引入其他html页面的方法

    2024年02月05日
    浏览(47)
  • 直接在html中引入Vue.js的cdn来实现一个简单的上传图片组件

    当使用 Vue.js 的 CDN 来实现一个简单的上传图片组件时,你可以利用 Vue 的数据绑定和事件处理能力,结合 HTML 和 CSS,轻松地创建一个交互式的图片上传界面。以下是一个示例: index.html TANKING https://afdian.net/item/ffa3292a337c11ee9a8c5254001e7c00

    2024年02月13日
    浏览(44)
  • html中引入视频的方法

    方法一:video标签 用于在html元素中添加视频元素 我引入视频就是使用这个标签,但是我使用视频的的属性并不多,只是使用了简单的播放暂停,至于其他的属性可能现在没有怎么使用,以后需要继续用一下。 至于我使用的时候有个时间点,和视频长度,本来就是想着这个属

    2024年02月11日
    浏览(37)
  • HTML引入css文件(四种方法)

    在HTML的head标签中的style标签中添加css样式,使用内嵌样式表定义的 CSS 样式只能在当前网页内使用。  因为内嵌样式表需要将 CSS 样式定义在 HTML 文档的内部,所以会导致文档的体积变大,而且当有其它文档也需要使用内嵌样式表中同样的样式时,无法引入到其他文档,必须

    2024年02月02日
    浏览(40)
  • 使用nginx+HTML2canvas将任意html网页转为png图片自定义张数

    本文简述如何使用nginx+html2canvas将任意网页html转为png图片 如果是本地网页,直接进行nginx反向代理就行 如果不是本地网页,需要简单利用工具转为本地网页 导入 导入,不能使用在线的库,只能下载到本地才能导入,因为会有同源限制,否则会报跨域错误。 下载导入 由于在

    2024年01月17日
    浏览(57)
  • vue中引入图片的方法

    一、图片放在/public目录下 二、图片在/src/assets目录下 此时需要使用相对路径来引用 我们先看一下@是否配置为了src目录,查看vue.config.js 方法1:在vue中设置一个变量来引入 然后直接在img中使用 方法2:在css样式中引用

    2024年02月06日
    浏览(29)
  • .html文件中引入element ui 的方法

    把主要文件下载下来vue.js,element.js,element.css下载下来(点击vue.js,粘贴复制即可,其他的一样) 我们也要把这两个字体样式拿下来,地址是: element-icons.woff element-icons.ttf 目录结构 代码中引入 提示: 这三个文件的顺序很重要 效果图 备注: 来源于https://blog.csdn.net/bingot/artic

    2024年02月11日
    浏览(38)
  • 全国主要城市建筑轮廓(含层高)矢量数据分享及最新AI提取建筑分布方法介绍

    今天要给大家带来的数据就是全国主要大中型城市的城市建筑轮廓矢量数据!!同时给大家一个傻瓜式的建筑物提取软件,以及其使用方法!! 一、数据基本情况 建筑轮廓数据实际上就是建筑的边界矢量数据,一般该数据属性中会记录对应建筑的高度或者楼层数,通过建筑

    2024年02月12日
    浏览(57)
  • 基于html/css/js的web网上书店系统网页设计大学生期末源码分享

    摘要: 随着互联网技术的发展,电子商务逐渐普及并成为人们购物的主要方式之一。本实验基于Web技术,使用HTML、CSS和JavaScript等前端技术,设计并实现了一个基于Web的书店商城系统。实现了用户和管理员两类用户的功能需求。 : Web;CSS;JavaScript;网上书店系统;

    2024年02月03日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包