个性化阅读
专注于IT技术分析

SVG基本形状详细介绍

本文概述

要绘制SVG, 有各种基本形状。这些形状的目的可通过其名称轻松理解。

定义元素时, 它对应于不同的形状, 并且有不同的属性来描述这些形状的大小和位置。

SVG提供了多种形状来绘制图像。这些如下:

长方形

rect元素用于在屏幕上绘制矩形。要控制屏幕上矩形的位置和形状, 有6个基本属性。

x:定义矩形左上角的位置。

y:定义矩形的顶部位置。

width:它定义矩形的宽度。

height:定义矩形的高度。

fill-opacity:用于定义填充颜色的不透明度。范围可以是0到1。

stroke-opacity:定义笔触颜色的不透明度。范围可以是0到1。

例子

<!DOCTYPE html>
<html>
<body>

<svg width="500" height="500">
  <rect x="50" y="50" width="200" height="200" style="fill:green;stroke:orange;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
 
</body>
</html>

circle元素用于在屏幕上绘制一个圆, 这里有3个基本属性适用。

r:定义圆的半径。

cx:定义圆心的x坐标。

cy:定义圆心的y坐标。

例子

<!DOCTYPE html>
<html>
<body>

<svg height="250" width="250">
  <circle cx="70" cy="70" r="40" stroke="red" stroke-width="3" fill="pink" />
</svg> 
 
</body>
</html>

立即测试

椭圆

椭圆是圆形元素的更一般形式。你可以分别缩放圆的x和y半径。

用于绘制椭圆的属性:

rx:定义水平半径。

ry:定义垂直半径。

cx:定义椭圆中心的x坐标。

cy:定义椭圆中心的y坐标。

例子

<!DOCTYPE html>
<html>
<body>

<svg height="500" width="500">
  <ellipse cx="250" cy="100" rx="120" ry="70" style="fill:red;stroke:black;stroke-width:3" />
</svg>

</body>
</html>

立即测试

线

line属性用于在屏幕上绘制一条直线。它有两个点, 它们指定了直线的起点和终点。

x1:定义x轴上线的起点。

y1:定义y轴上的线的起点。

x2:定义x轴上的线的终点。

y2:定义y轴上的线的终点。

例子

<!DOCTYPE html>
<html>
<body>

<svg height="500" width="450">
  <line x1="5" y1="5" x2="150" y2="150" style="stroke:rgb(0, 0, 255);stroke-width:3" />
</svg>

</body>
</html>

立即测试

折线

折线是连接的直线组。它在一个属性中具有所有线点。

例子

<!DOCTYPE html>
<html>
<body>

<svg height="450" width="450">
  <polyline points="10, 20 40, 30 55, 45 76, 125 125, 135 210, 200" style="fill:none;stroke:black;stroke-width:3" />
</svg>

</body>
</html>

立即测试

在此列表中, 每个数字都用空格逗号分隔。每个点必须包含两个定义x坐标和y坐标的数字。因此, 点(0, 0), (1, 1)和(2, 2)的列表可以写为” 0 0, 1 1, 2 2″。

路径

路径是SVG中可以使用的最通用的形状。通过path元素, 你可以绘制椭圆, 矩形, 多边形, 圆形和折线。为了控制其形状, 只有一个属性。

例子

<!DOCTYPE html>
<html>
<body>

<svg height="450" width="450">
  <path d="M250 10 L100 200 L400 200 Z" />
</svg>

</body>
</html>

立即测试

解释

该代码定义了一条路径, 该路径从位置250, 10开始, 有一条线到位置100, 200, 然后从那里开始, 有一条线到达400, 200, 最后将路径闭合回到250, 10。

赞(0) 打赏
未经允许不得转载:srcmini » SVG基本形状详细介绍
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏