最前端

我的工作,我的生活,点点滴滴...

svg图标

  1. 创建svg symbol代码,可放在页面内,亦可放在一个单独文件,如svgdefs.svg:

    <svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
    <symbol id="icon-home" viewBox="0 0 1024 1024">
    	<title>home</title>
    	<path class="path1" d="M512 32l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 448c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
    </symbol>
    <symbol id="icon-edit" viewBox="0 0 1024 1024">
    	<title>edit</title>
    	<path class="path1" d="M864 0c88.364 0 160 71.634 160 160 0 36.020-11.91 69.258-32 96l-64 64-224-224 64-64c26.742-20.090 59.978-32 96-32zM64 736l-64 288 288-64 592-592-224-224-592 592zM715.578 363.578l-448 448-55.156-55.156 448-448 55.156 55.156z"></path>
    </symbol>
    <symbol id="icon-tag" viewBox="0 0 1024 1024">
    	<title>tag</title>
    	<path class="path1" d="M976 0h-384c-26.4 0-63.274 15.274-81.942 33.942l-476.116 476.116c-18.668 18.668-18.668 49.214 0 67.882l412.118 412.118c18.668 18.668 49.214 18.668 67.882 0l476.118-476.118c18.666-18.666 33.94-55.54 33.94-81.94v-384c0-26.4-21.6-48-48-48zM736 384c-53.020 0-96-42.98-96-96s42.98-96 96-96 96 42.98 96 96-42.98 96-96 96z"></path>
    </symbol>
    </defs>
    </svg>
  2. 页面上可如下引用,如:

    <!-- 内嵌在html页面时,href直接填写#id即可 -->
    <svg class="icon icon-tag"><use xlink:href="#icon-tag"></use></svg>
    <!-- 从单独文件外引时,href需要加上文件路径 -->
    <svg class="icon icon-tag"><use xlink:href="img/ico/svgdefs.svg#icon-tag"></use></svg>
  3. 可以svg标签上的class添加样式,如:

    .icon {
    	display: inline-block;
    	width: 1em;
    	height: 1em;
    	fill: currentColor;
    	font-size: 14px;
    	color: #828282;
    }
  4. 注意ie8及以下是不兼容的,无法显示.

参考链接

  1. 暂无评论

  1. 暂无 Trackback

您必须 登录 后才能发表评论