如何在 HTML 中使用 svg
- 作者: 段友大集合
- 来源: 51数据库
- 2021-08-13
在网页使用 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 中
<body>
<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>
<div class="icon">
<svg class="icon icon-down">
<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;
}
推荐阅读
