如何在 HTML 中使用 svg

最新推荐文章于 2024-08-28 07:00:00 发布

waitti

最新推荐文章于 2024-08-28 07:00:00 发布

阅读量4.1k

点赞数 1

分类专栏：前端学习文章标签： html css svg

本文链接：https://blog.csdn.net/waitti/article/details/107522676

版权

前端学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在网页使用 svg

先在素材网站上找到素材，下载 svg 格式，一般在 iconfont 上面找素材，这里以向下的箭头为例： https://www.iconfont.cn/search/index?searchType=icon&q=%E5%90%91%E4%B8%8B%E7%AE%AD%E5%A4%B4

在这里插入图片描述
找到第二个点击下载，选择 svg 格式；

下载后以记事本方式打开 svg 文件，如下所示：
在这里插入图片描述
先放着，打开所要展示 svg 图片的 html，将 viewBox 和 <path> 标签的内容复制到 symbol 中
如果一个页面需要多个svg，则把symbol放在 <svg><def></def></svg>中:

<body>
	<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<defs>
			<symbol id="icon-down" viewBox="0 0 1024 1024">
    			<title>down</title>
        		<path d="M771.512499 509.49597 511.614214 959.653483 251.715929 509.49597 414.441057 509.49597 414.441057 64.132646 608.786347 64.132646 608.786347 509.49597Z" p-id="982"></path>
    		</symbol>
        </defs>
	</svg> 
    <div class="icon">
        <svg class="icon icon-down">
        	<use xlink:href="#icon-down"></use>
        </svg>
    </div>
</body>

如果只有一个，可以直接放在<svg>中：

<body>
    <div class="icon">
        <svg class="icon icon-down">
        	<symbol id="icon-down" viewBox="0 0 1024 1024">
    			<title>down</title>
        		<path d="M771.512499 509.49597 511.614214 959.653483 251.715929 509.49597 414.441057 509.49597 414.441057 64.132646 608.786347 64.132646 608.786347 509.49597Z" p-id="982"></path>
    		</symbol>
        	<use xlink:href="#icon-down"></use>
        </svg>
    </div>
</body>

注意：

不能改动 viewBox 和 <path> 中的值，会导致图片不再是原形状；
引用 svg 时，<use> 中使用 xlink:href 属性，其值为 symbol 的 id；
对 svg 进行 css 操作时，需要对 <svg> 标签进行操作，而不是 <symbol>。

可以直接对类icon-down 添加 css 的 width 和 height，即呈现出来的宽度和高度

.icon-down {
    width: 12px;
    height: 12px;
}

waitti

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录