美文网首页
SVG(推荐趋势)

SVG(推荐趋势)

作者: kzc爱吃梨 | 来源:发表于2019-06-21 15:42 被阅读0次

symbol引用


这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与上面两种相比具有如下特点:

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
  • 兼容性较差,支持 ie9+,及现代浏览器。
  • 浏览器渲染svg的性能一般,还不如png。

使用步骤如下:

第一步:拷贝项目下面生成的symbol代码:

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

第二步:加入通用css代码(引入一次就行):

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

第三步:挑选相应图标并获取类名,应用于页面:

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

相关文章

  • SVG(推荐趋势)

    symbol引用 这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章...

  • 记环形进度条(静态,非动态从0变到100%,svg实现)

    环形进度条可以用svg 实现,Element-ui中的环形进度条就是用svg实现的 svg好文链接:1、推荐!介绍...

  • SVG嵌入HTML

    SVG: SVG是可缩放矢量图形,1999年由万维网联盟发布。于2013年成为W3C推荐标准。 SVG是指可伸缩矢...

  • 使用字体图标

    说明:使用字体图标 推荐网站:Icon Font & SVG Icon Sets ❍ IcoMoon https:...

  • 推荐SVG教程系列

    1.基础了解SVG 基础传送门 2.进阶-高级(多种骚操作) 进阶-高级传送门 3.SVG文档 SVG文档传送门 ...

  • SVG简介

    SVG是什么? SVG是使用XML来描述二维图形和绘图程序的语言,于2003年1月14日成为W3C推荐标准。 SV...

  • Android图片之svg

    1.SVG是什么2.SVG优点3.SVG使用4.获取SVG5.封装使用6.SVG动画 1.SVG是什么? SVG(...

  • SVG的使用

    SVG图片 一. SVG介绍 1.1. SVG概念解析 SVG全称: Scalable Vector Graphi...

  • 资源

    SVG svg icon 对应git(node.js写的) svg animation study svg cs...

  • (第六天)HTML5之SVG的了解与使用&Web数据存储

    SVG 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用...

网友评论

      本文标题:SVG(推荐趋势)

      本文链接:https://www.haomeiwen.com/subject/jiesqctx.html