欢迎关注我公众号:AI悦创,有更多更好玩的等你发现!
公众号:AI悦创【二维码】
原创2022年11月5日...小于 1 分钟
欢迎关注我公众号:AI悦创,有更多更好玩的等你发现!
<text>
<text>
元素用于定义文本。
写一个文本:
I love SVG
下面是 SVG 代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red">I love SVG</text>
</svg>
<path>
<path>
元素用于定义一个路径。
下面的命令可用于路径数据:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
<polyline>
<polyline
> 元素是用于创建任何只有直线的形状:
下面是 SVG 代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3" />
</svg>
<polygon>
<polygon>
标签用来创建含有不少于三个边的图形。
多边形是由直线组成,其形状是"封闭"的(所有的线条 连接起来)。
polygon 来自希腊。 "Poly" 意味 "many" , "gon" 意味 "angle".
下面是 SVG 代码:
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>
<line>
<line>
元素是用来创建一个直线:
下面是 SVG 代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
<ellipse>
<ellipse>
元素是用来创建一个椭圆:
椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径,而圆的 x 和 y 半径是相同的:
下面是 SVG 代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
<circle>
<circle>
标签可用来创建一个圆:
下面是 SVG 代码:
<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>
SVG有一些预定义的形状元素,可被开发者使用和操作:
<rect>
<circle>
<ellipse>
<line>
<polyline>
<polygon>
<path>
SVG 文件可通过以下标签嵌入 HTML 文档:<embed>
、<object>
或者 <iframe>
。
SVG 的代码可以直接嵌入到 HTML 页面中,或您可以直接链接到 SVG 文件。
<embed>
标签<embed>
:
SVG 文件推荐使用 .svg(全部小写)作为此类文件的扩展名。
一个简单的 SVG 图形例子:
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="115" font-size="16" text-anchor="middle" fill="white">Bornforthis SVG TEST</text>
</svg>
SVG 是使用 XML 来描述二维图形和绘图程序的语言。
继续学习之前,你应该对以下内容有基本的了解:
如果希望首先学习这些内容,请在本站的首页选择相应的教程。