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元素, 你可以绘制椭圆, 矩形, 多边形, 圆形和折线。为了控制其形状, 只有一个属性。
例子