什么是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] view
plain copy

print?

  1. <html xmlns:svg="http://www.w3.org/2000/svg">
  2. <body>
  3. <p>This is an HTML paragraph</p>
  4. <svg:svg width="300" height="100" version="1.1" >
  5. <svg:circle cx="100" cy="50" r="40" stroke="black"
  6. stroke-width="2" fill="red" />
  7. </svg:svg>
  8. </body>
  9. </html>

SVG提供的预定义形状元素的使用和操作：

<rect>标签可用来创建矩形，以及矩形的变种

<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> 标签可用来创建一个圆

<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> 标签可用来创建椭圆

<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> 标签用来创建线条。

<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> 标签用来创建含有不少于三个边的图形

<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>

代码解释：

1)points 属性定义多边形每个角的 x 和 y 坐标

<polyline> 标签用来创建仅包含直线的形状

<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> 标签用来定义路径

<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高斯模糊

<filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜？

<filter> 标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

<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)<filter> 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）

2)filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符

3)滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜

4)<feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度

5)in="SourceGraphic" 这个部分定义了由整个图像创建效果

<linearGradient> 可用来定义 SVG 的线性渐变

<linearGradient> 标签必须嵌套在 <defs> 的内部。<defs> 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。

线性渐变可被定义为水平、垂直或角形的渐变：

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)<linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称

2)fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变

3)<linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置

4)渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。

<radialGradient> 用来定义放射性渐变

<radialGradient> 标签必须嵌套在 <defs> 中。<defs> 标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义。

<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)<radialGradient> 标签的 id 属性可为渐变定义一个唯一的名称，fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变，cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。

在svg中提供了如g元素这样的将多个元素组织在一起的元素。由g元素编组在一起的可以设置相同的颜色，可以进行坐标变换

[html] view
plain copy

print?

  1. <svg width="100%" height="100%" version="1.1"
  2. xmlns="http://www.w3.org/2000/svg">
  3. <g fill="dodgerblue">
  4. <rect x="10" y="10" width="40" height="40" ry="10" />
  5. <rect x="80" y="80" width="40" height="40" ry="10" />
  6. <rect x="150" y="150" width="40" height="40" ry="10" />
  7. </g>
  8. </svg>
时间： 2024-12-15 13:06:08

什么是SVG和SVG常用的形状的相关文章

HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画

SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用SVG DOM.SVG DOM兼容DOM1和DOM2,而SVG又定义了一套附加的DOM接口,支持脚本动画.通过这个方法可以获得各种动画效果.脚本语言中的定时器对象可以用来启动和控制动画. SVG被设计为支持未来版本的SMIL(Sychronized Multimedia Integration Lan

[翻译svg教程]svg中矩形元素 rect

svg 元素<rect> 是一个矩形元素,用这个元素,可以你可以绘制矩形,设置矩形宽高,边框的宽度颜色,矩形的填充颜色,是否用圆角等 rect 示例 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="10" y="10" height="100"

[翻译svg教程]svg中的circle元素

svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"

[翻译svg教程]svg 中的g元素

svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个元素一样,和<svg>相比这是一个很好的优势,嵌套的svg中元素是不会被变换影响的. g元素实例 g元素代码实例 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/199

CSS3写常用的形状

正方形: 1 .square{ width: 100px;height: 100px; background: #E57779;} 长方形: 1 .rectangle{ width: 200px;height: 100px; background: #E57779;} 圆形: 1 .circle{ width: 100px;height: 100px;background: #E57779; 2 border-radius: 50%; 3 } 椭圆形: 1 .oval{ width: 200px

SVG基本形状及样式设置

前面的话 图形分为位图和矢量图.位图是基于颜色的描述,是由像素点组成的图像:而矢量图是基于数学矢量的描述,是由几何图元组成的图像,与分辨率无关.可缩放矢量图形,即SVG,是W3C XML的分支语言之一,用于标记可缩放的矢量图形.本文将详细介绍SVG基本形状及样式设置 概述 SVG是XML语言的一种形式,有点类似XHTML,它可以用来绘制矢量图形,可以通过定义必要的线和形状来创建一个图形,也可以修改已有的位图,或者将这两种方式结合起来创建图形 [注意]IE8-浏览器不兼容 SVG提供了一些元素,用

【Web动画】SVG 线条动画入门

CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画. 举个栗子 SVG 线条动画,在一些特定的场合下可以解决使用 CSS 无法完成的动画.尤其是在进度条方面,看看最近项目里的一个小需求,一个这种形状的进度条: 把里面的进度条单独拿出来,也就是需要实现这样一个效果: 脑洞大开一下,使用 CSS3 如何实现这样一个进度条呢. CS

SVG图片技术小结

今天在公司没事,研究了一下最近流行的SVG技术,发现,随着css3的不断流行,和浏览器技术的发展,SVG将会取代网站大量图片,成为网站图片展现的主流. AI是我们常用的矢量图编辑器,现在AI可以直接另存SVG图片,SVG图片相比传统图片,占位更小,浏览更方便!而且可扩展性更强! 下面看一个SVG的例子: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//

SVG开发包, 20 个有用的 SVG 工具，提供更好的图像处理

20 个有用的 SVG 工具,提供更好的图像处理 SVG 现正在 Web 设计领域变得越发流行, 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像. 但当进行 Web 设计时,我们还需要做一些优化来使得 SVG 变得更加轻量. 下面介绍的 20 个工具,可以帮助你快速有效的创建 SVG 图像.现有的在线工具已经可以帮助我们进行优化.转换.新建模式等工作. 更详细的介绍,参见:How To Create SVG Animation Using CSS 交互式 SVG