当前位置： 移动技术网 > IT编程>网页制作>HTML > 如何在 HTML 中使用 svg

如何在 HTML 中使用 svg

2020年07月24日  | 移动技术网IT编程  | 我要评论

在网页使用 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;
}

本文地址：https://blog.csdn.net/waitti/article/details/107522676

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网