svg矢量图标

待我称王封你为后i 2022-10-29 01:43 283阅读 0赞

一、介绍：是使用 XML来描述二维图形和绘图程序的语言，可缩放矢量图形。Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。IE8和早期版本都需要一个插件 - 如Adobe SVG浏览器，这是免费提供的。

*  SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
 *  SVG 用来定义用于网络的基于矢量的图形
 *  SVG 使用 XML 格式定义图形
 *  SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
 *  SVG 是万维网联盟的标准
 *  SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

阿里svg网址：[https://www.iconfont.cn/plus][https_www.iconfont.cn_plus]

二、svg属性：SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg>。这是根元素。常用属性：

1、width ：宽度，数字或者百分比

2、height ：高度，数字或者百分比

3、version ：可定义所使用的 SVG 版本

4、xmlns ：可定义 SVG 命名空间。

三、语法：svg预定义的形状元素（标签）有：

1、矩形 <rect>：<rect> 标签可用来创建矩形，以及矩形的变种。常用属性：

（1） width 和 height ：可定义矩形的高度和宽度

（2）x 、y属性：定义矩形的左侧位置、顶端位置（如，x="0" 表示矩形到浏览器窗口左侧的距离是 0px，y="0" 表示矩形到浏览器窗口顶端的距离是 0px），数字或者百分比

（3）rx 和 ry 属性：可使矩形产生圆角。

（4）style 属性：用来定义 CSS 属性，其中，

1）fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）

2）stroke-width 属性定义边框的宽度

3）stroke 属性定义边框的颜色

4）fill-opacity ：定义填充颜色透明度（合法的范围是：0 - 1）

5）stroke-opacity ：定义轮廓颜色的透明度（合法的范围是：0 - 1）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <rect width="300" height="100" x="50" y="20"
      style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
    </svg>

2、 圆形<circle> ：标签可用来创建一个圆。常见属性：

（1）cx和cy：定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)

（2）r：定义圆的半径

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <circle cx="100" cy="50" r="40" stroke="black"
      stroke-width="2" fill="red"/>
    </svg>

3、椭圆<ellipse>

4、直线 <line>

5、多边形<polygon>

6、曲线<polyline>

7、路径<path>：<path> 元素用于定义一个路径。常用属性：

（1）d：定义路径的，下面的命令可用于路径数据，均允许小写字母。大写表示绝对定位，小写表示相对定位：

1）M = moveto

2）L = lineto

3）H = horizontal lineto

4）V = vertical lineto

5）C = curveto

6）S = smooth curveto

7）Q = quadratic Bézier curve

8）T = smooth quadratic Bézier curveto

9）A = elliptical Arc

10）Z = closepath

如开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <path d="M150 0 L75 200 L225 200 Z" />
    </svg>

8、文本 <text>：

四、使用方法：有三种方法：

1、方法1：直接使用svg代码；如：我从阿里矢量图官网[https://www.iconfont.cn/][https_www.iconfont.cn]复制的svg半圆，并插入自定义的文字（text标签中的内容）：

<svg
          t="1612603582072"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2958"
          width="100%"
          height="100%"
        >
          <path
            d="M804.5 835.4375L720.828125 728.5625c109.6875-105.46875 123.75-279.84375 27.421875-401.484375-103.359375-130.078125-291.796875-152.578125-421.875-49.921875s-151.875 291.796875-49.21875 421.875c9.140625 11.25 18.28125 21.796875 28.828125 31.640625l-83.671875 106.171875c-18.28125-16.171875-35.15625-34.453125-51.328125-54.140625C21.921875 594.265625 54.265625 320.046875 242.703125 171.6875S704.65625 54.96875 853.71875 243.40625c142.734375 180.703125 118.828125 439.453125-49.21875 592.03125z"
            fill="#F6C076"
            p-id="2959"
          ></path>
          <text x="50%" y="45%" font-size="150" style="fill: #555555"  text-anchor="middle" dominant-baseline="middle">
            <tspan font-weight="bold">{
       {label}}</tspan>
          </text>
           <text x="50%" y="65%" font-size="150" style="fill: #555555"  text-anchor="middle" dominant-baseline="middle">
            <tspan font-weight="bold">{
       {number}}{
       {isPercent ? '%':''}}</tspan>
          </text>
        </svg>

2、方法2：通过以下标签嵌入到 HTML 文档中：<embed>、<object> 或者 <iframe>

（1）<embed> ：语法 <embed src="circle1.svg" type="image/svg+xml" />

*  优势：所有主要浏览器都支持，并允许使用脚本
 *  缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

（2）<object> ：语法 <object data="circle1.svg" type="image/svg+xml"></object>

*  优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
 *  缺点：不允许使用脚本。

（3）<iframe>:语法 <iframe src="circle1.svg"></iframe>

*  优势：所有主要浏览器都支持，并允许使用脚本
 *  缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

3、链接到SVG文件：a标签，语法 <a href="circle1.svg">查看 SVG 文件</a>

[https_www.iconfont.cn_plus]: https://www.iconfont.cn/plus
[https_www.iconfont.cn]: https://www.iconfont.cn/

发表评论取消回复

表情：

评论列表（有 0 条评论，283人围观）

还没有评论，来说两句吧...

相关阅读

相关 svg修改图标颜色

对于svg图标，想通过hover或者active 添加颜色，没有办法修改，解决办法： 1. 修改[svg图片][svg]源最开始的svg图标： ![2275efcd3b

水深无声/ 2024年03月17日 17:38/ 0 赞/ 94 阅读

相关 uniapp怎么使用阿里矢量图标，阿里矢量图标下载，阿里矢量图标应用，改变iconfont，uniapp 引用阿里矢量图标

一.图标下载 1. 话不多说上网址 [https://www.iconfont.cn/][https_www.iconfont.cn] 2.先选择图标加入购物车，记得先

缺乏、安全感/ 2022年11月29日 13:13/ 0 赞/ 258 阅读

相关 svg矢量图标

一、介绍：是使用 XML来描述二维图形和绘图程序的语言，可缩放矢量图形。Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。IE

待我称王封你为后i/ 2022年10月29日 01:43/ 0 赞/ 284 阅读

相关 SVG（可扩展矢量图）系列教程

本系列教程同步至博客[www.waylau.com][] 从新往久排序，持续更新 [SVG与JS交互实例之画板][SVG_JS] [SVG <marker>

Bertha 。/ 2022年08月27日 10:55/ 0 赞/ 166 阅读

相关网页使用SVG图标

<html> <style> .logo{ background-repeat:no-repeat; background-i

浅浅的花香味﹌/ 2022年05月28日 14:07/ 0 赞/ 236 阅读

相关安卓中使用SVG矢量图

GitHubDemo:[https://github.com/xwpeng/TestSVG][https_github.com_xwpeng_TestSVG] １. 基础

男娘i/ 2022年05月24日 04:29/ 0 赞/ 745 阅读

相关 zico图标精灵-创作导出svg、png、eps、webP、base64格式图标与矢量转换超级大法

由独立软件厂商逐浪CMS旗下的zico平台提供的独立产品，全新一代基于全栈与移动开发体验的图标库系统，官网Http://ico.z01.com 目前zico平台已经发布了全新的

缺乏、安全感/ 2022年05月17日 22:51/ 0 赞/ 305 阅读

相关 SVG（可扩展矢量图）系列教程

本系列教程同步至博客[www.waylau.com][] 从新往久排序，持续更新 [SVG与JS交互实例之画板][SVG_JS] [SVG <marker>创建箭头][

ゝ一世哀愁。/ 2022年04月13日 10:29/ 0 赞/ 226 阅读

相关 Bootstrap 字体图标和自定义矢量图标

一、Bootstrap 字体图标 Bootstrap包括250多个来自 Glyphicon Halflings 的字体图标。使用：将图标类

朱雀/ 2022年03月22日 15:47/ 0 赞/ 466 阅读

相关 Axure中SVG矢量图标的使用方法及资源推荐

我们经常需要在原型中使用各种各样的图标，所以往往需要大量的图标素材。并且，为了保证图标缩放不失真，这些素材最好是矢量图。刚好最新的Axure RP 8.0版本支持导入SVG

待我称王封你为后i/ 2021年09月23日 10:58/ 0 赞/ 559 阅读