svg是什么？svg常用的方法（附代码）
本篇文章给大家带来的内容是关于SVG是什么？svg常用的方法（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
SVG是什么？
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
与其他图像格式相比，使用 SVG 的优势在于：
SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
代码结构
<html xmlns:svg="http://www.w3.org/2000/svg"> <body> <p>This is an HTML paragraph</p> <svg:svg width="300" height="100" version="1.1" > <svg:circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg:svg> </body> </html>
SVG提供的预定义形状元素的使用和操作：
<rect x="20" y="20" rx="20" ry="20" width="250" height="250" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>
代码解释：
1)rect 元素的 width 和 height 属性可定义矩形的高度和宽度
2)style 属性用来定义 CSS 属性
3)CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
4)CSS 的 stroke-width 属性定义矩形边框的宽度
5)CSS 的 stroke 属性定义矩形边框的颜色
6)x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
7)y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
8)CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
9)CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1)
10)rx 和 ry 属性可使矩形产生圆角。
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
代码解释：
1)cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
2)r 属性定义圆的半径。
<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>
代码解释：
1)cx 属性定义圆点的 x 坐标
2)cy 属性定义圆点的 y 坐标
3)rx 属性定义水平半径
4)ry 属性定义垂直半径
<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
代码解释：
1)x1 属性在 x 轴定义线条的开始
2)y1 属性在 y 轴定义线条的开始
3)x2 属性在 x 轴定义线条的结束
4)y2 属性在 y 轴定义线条的结束
<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>
代码解释：
1)points 属性定义多边形每个角的 x 和 y 坐标
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>
代码解释：
1)points 属性定义每段线的每个角的 x 和 y 坐标
<path d="M250 150 L150 350 L350 350 Z" />
下面的命令可用于路径数据：
M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Belzier curve T = smooth quadratic Belzier curveto A = elliptical Arc Z = closepath
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位
SVG 滤镜 可用的滤镜有：
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight
Gaussian Blur高斯模糊
<defs> <filter id="Gaussian_Blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="3" /> </filter> </defs> <ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/>
代码解释：
1)
2)filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
3)滤镜效果是通过
4)
5)in="SourceGraphic" 这个部分定义了由整个图像创建效果
线性渐变可被定义为水平、垂直或角形的渐变：
1)当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
2)当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
3)当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变
<defs> <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/> </linearGradient> </defs> <ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/>
代码解释：
1)
2)fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
3)
4)渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个
<defs> <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/> </radialGradient> </defs> <ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>
代码解释：
1)
在svg中提供了如g元素这样的将多个元素组织在一起的元素。由g元素编组在一起的可以设置相同的颜色，可以进行坐标变
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<g fill="dodgerblue">
<rect x="10" y="10" width="40" height="40" ry="10" />
<rect x="80" y="80" width="40" height="40" ry="10" />
<rect x="150" y="150" width="40" height="40" ry="10" />
</g>
</svg>相关文章推荐：
以上是svg是什么？svg常用的方法（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
聊聊如何利用 SVG 实现图片马赛克效果
Sep 01, 2022 am 11:05 AM
不借助 Javascript，如何利用 SVG 实现图片马赛克效果？下面本篇文章就来带大家详细了解一下，希望对大家有所帮助！
深入浅析vue3 vite中怎么使用svg图标
Apr 28, 2022 am 10:48 AM
svg图片在项目中使用的非常广泛，下面本篇文章带大家介绍一下如何在vue3 vite 中使用svg图标，希望对大家有所帮助！
svg怎么转jpg格式
Nov 24, 2023 am 09:50 AM
svg可以通过使用图像处理软件、使用在线转换工具和使用Python图像处理库的方法来转jpg格式。详细介绍：1、图像处理软件包括Adobe Illustrator、Inkscape和GIMP；2、在线转换工具包括CloudConvert、Zamzar、Online Convert等；3、Python图像处理库等等。
VUE3入门教程：使用Vue.js插件玩转SVG
Jun 16, 2023 am 09:48 AM
随着现代Web前端开发的不断发展，越来越多的技术被广泛应用于实际开发中。其中，Vue.js是目前最为流行的JavaScript框架之一，它基于MVVM模式，提供了丰富的API和组件库，使得开发响应式、可复用、高效的Web应用变得更加容易。而目前最新的Vue.js3版本相较于旧版，又有着更好的性能和更丰富的特性，引起了广泛的关注和研究。本文将会为大家介绍一种
详解用SVG给 favicon 添加标识
Sep 07, 2022 am 10:30 AM
怎么使用SVG给 favicon 添加标识？下面本篇文章给大家介绍一下使用 SVG 生成带标识的 favicon的方法，希望对大家有所帮助！
vue3 vite2中怎么使用svg方法
May 11, 2023 pm 05:55 PM
一、安装vite-plugin-svg-icons此处还需要安装下fast-glob相关依赖，不然vite运行npmrundev时会报Cannotfindmodule'fast-glob’的错误npmifast-glob@3.x-Dnpmivite-plugin-svg-icons@2.x-D二、在src/components/svgIcon下新建组件index.vueimport{computed}from'vue';cons
vue3 vue-cli4中怎么使用svg
May 11, 2023 pm 05:58 PM
一、安装svg-sprite-loadernpminstallsvg-sprite-loader--save-dev二、在src/components/svgIcon下新建组件index.vueimport{computed}from"@vue/reactivity";exportdefault{name:"baseSvgIcon",props:{iconClass:{type:String},className:{type:String},},setup
在HTML5画布上绘制SVG文件
Sep 15, 2023 pm 03:09 PM
要在画布元素上绘制HTMLImageElements，请使用drawImage()方法。此方法使用src=”mySVG.svg”定义一个Image变量，并在加载时使用drawImage。varmyImg=newImage();myImg.onload=function(){ ctx.drawImage(myImg,0,0);}img.src="http://www.example.com/files/sample.svg";
