SVG教程Word文档格式.docx
- 文档编号:19664063
- 上传时间:2023-01-08
- 格式:DOCX
- 页数:24
- 大小:305.40KB
SVG教程Word文档格式.docx
《SVG教程Word文档格式.docx》由会员分享,可在线阅读,更多相关《SVG教程Word文档格式.docx(24页珍藏版)》请在冰豆网上搜索。
<
?
xmlversion="
1.0"
standalone="
no"
>
!
DOCTYPEsvgPUBLIC"
-//W3C//DTDSVG1.1//EN"
"
http:
//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
svgwidth="
100%"
height="
version="
1.1"
xmlns="
//www.w3.org/2000/svg"
circlecx="
100"
cy="
50"
r="
40"
stroke="
black"
stroke-width="
2"
fill="
red"
/>
/svg>
运行结果:
代码解释:
第一行包含了XML声明。
请注意standalone属性!
该属性规定此SVG文件是否是“独立的”,或含有对外部文件的引用。
standalone="
意味着SVG文档会引用一个外部文件-在这里,是DTD文件。
第二和第三行引用了这个外部的SVGDTD。
该DTD位于“http:
//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。
该DTD位于W3C,含有所有允许的SVG元素。
SVG代码以<
svg>
元素开始,包括开启标签<
和关闭标签<
。
这是根元素。
width和height属性可设置此SVG文档的宽度和高度。
version属性可定义所使用的SVG版本,xmlns属性可定义SVG命名空间。
SVG的<
circle>
用来创建一个圆。
cx和cy属性定义圆中心的x和y坐标。
如果忽略这两个属性,那么圆点会被设置为(0,0)。
r属性定义圆的半径。
stroke和stroke-width属性控制如何显示形状的轮廓。
我们把圆的轮廓设置为2px宽,黑边框。
fill属性设置形状内的颜色。
我们把填充颜色设置为红色。
关闭标签的作用是关闭SVG元素和文档本身。
注释:
所有的开启标签必须有关闭标签!
二SVG形状
SVG有一些预定义的形状元素,可被开发者使用和操作。
SVG形状
SVG有一些预定义的形状元素,可被开发者使用和操作:
∙矩形<
rect>
∙圆形<
∙椭圆<
ellipse>
∙线<
line>
∙折线<
polyline>
∙多边形<
polygon>
∙路径<
path>
下面的章节会为您讲解这些元素,首先从矩形元素开始。
标签
标签可用来创建矩形,以及矩形的变种。
要理解它的工作原理,请把这些代码拷贝到记事本,然后保存为"
rect1.svg"
文件。
把此文件放入web目录中:
rectwidth="
300"
style="
fill:
rgb(0,0,255);
stroke-width:
1;
stroke:
rgb(0,0,0)"
∙rect元素的width和height属性可定义矩形的高度和宽度
∙style属性用来定义CSS属性
∙CSS的fill属性定义矩形的填充颜色(rgb值、颜色名或者十六进制值)
∙CSS的stroke-width属性定义矩形边框的宽度
∙CSS的stroke属性定义矩形边框的颜色
结果
让我们看一下另一个包含新属性的例子:
rectx="
20"
y="
width="
250"
blue;
pink;
5;
fill-opacity:
0.1;
stroke-opacity:
0.9"
例子解释:
∙x属性定义矩形的左侧位置(例如,x="
0"
定义矩形到浏览器窗口左侧的距离是0px)
∙y属性定义矩形的顶端位置(例如,y="
定义矩形到浏览器窗口顶端的距离是0px)
∙CSS的fill-opacity属性定义填充颜色透明度(合法的范围是:
0-1)
∙CSS的stroke-opacity属性定义笔触颜色的透明度(合法的范围是:
为整个元素定义透明度:
opacity:
CSS的opacity属性定义整个元素的透明值(合法的范围是:
结果:
最后的例子,创建带有圆角的矩形:
rx="
ry="
height="
style="
red;
black;
0.5"
rx和ry属性可使矩形产生圆角。
标签可用来创建一个圆。
请把下面的代码拷贝到记事本,然后把文件保存为"
circle1.svg"
把此文件放入您的web目录:
cx和cy属性定义圆点的x和y坐标。
如果省略cx和cy,圆的中心会被设置为(0,0)
标签可用来创建椭圆。
椭圆与圆很相似。
不同之处在于椭圆有不同的x和y半径,而圆的x和y半径是相同的。
ellipse1.svg"
把此文件放入您的web目录:
ellipsecx="
150"
200"
80"
rgb(200,100,50);
rgb(0,0,100);
∙cx属性定义圆点的x坐标
∙cy属性定义圆点的y坐标
∙rx属性定义水平半径
∙ry属性定义垂直半径
下面的例子创建了三个累叠而上的椭圆:
240"
220"
30"
purple"
70"
190"
lime"
210"
45"
170"
15"
yellow"
下面的例子组合了两个椭圆(一个黄的和一个白的):
white"
标签用来创建线条。
line1.svg"
linex1="
y1="
x2="
y2="
rgb(99,99,99);
∙x1属性在x轴定义线条的开始
∙y1属性在y轴定义线条的开始
∙x2属性在x轴定义线条的结束
∙y2属性在y轴定义线条的结束
标签用来创建含有不少于三个边的图形。
polygon1.svg"
polygonpoints="
220,100300,210170,250"
#cccccc;
#000000;
1"
points属性定义多边形每个角的x和y坐标
下面的例子创建一个四边形:
220,100300,210170,250123,234"
SVG<
标签用来创建仅包含直线的形状。
polyline1.svg"
polylinepoints="
0,00,2020,2020,4040,4040,60"
white;
标签用来定义路径。
下面的命令可用于路径数据:
∙M=moveto
∙L=lineto
∙H=horizontallineto
∙V=verticallineto
∙C=curveto
∙S=smoothcurveto
∙Q=quadraticBelziercurve
∙T=smoothquadraticBelziercurveto
∙A=ellipticalArc
∙Z=closepath
以上所有命令均允许小写字母。
大写表示绝对定位,小写表示相对定位。
path1.svg"
pathd="
M250150L150350L350350Z"
/>
上面的例子定义了一条路径,它开始于位置250150,到达位置150350,然后从那里开始到350350,最后在250150关闭路径。
下面的例子创建了一个螺旋:
M153334
C153334151334151334
C151339153344156344
C164344171339171334
C171322164314156314
C142314131322131334
C131350142364156364
C175364191350191334
C191311175294156294
C131294111311111334
C111361131384156384
C186384211361211334
C211300186274156274"
SVG滤镜用来向形状和文本添加特殊的效果。
SVG滤镜
在SVG中,可用的滤镜有:
∙feBlend
∙feColorMatrix
∙feComponentTransfer
∙feComposite
∙feConvolveMatrix
∙feDiffuseLighting
∙feDisplacementMap
∙feFlood
∙feGaussianBlur
∙feImage
∙feMerge
∙feMorphology
∙feOffset
∙feSpecularLighting
∙feTile
∙feTurbulence
∙feDistantLight
∙fePointLight
∙feSpotLight
您可以在每个SVG元素上使用多个滤镜!
必须在<
defs>
标签中定义SVG滤镜。
高斯模糊(GaussianBlur)
filter>
标签用来定义SVG滤镜。
标签使用必需的id属性来定义向图形应用哪个滤镜?
标签必须嵌套在<
标签内。
标签是definitions的缩写,它允许对诸如滤镜等特殊元素进行定义。
filter1.svg"
filterid="
Gaussian_Blur"
feGaussianBlurin="
SourceGraphic"
stdDeviation="
3"
/filter>
/defs>
#ff0000;
stro
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- SVG 教程