SVG学习笔记一

最新推荐文章于 2024-05-25 14:18:20 发布

原创最新推荐文章于 2024-05-25 14:18:20 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

SVG动画专栏收录该内容

2 篇文章

订阅专栏

本文介绍了SVG预定义的形状元素，如矩形、圆形、椭圆等。详细说明了各元素的属性，像rect元素的width、height等属性，还介绍了CSS属性在定义元素样式、颜色、透明度等方面的应用。此外，给出了路径元素的命令及大小写定位规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SVG有一些预定义的形状元素，可被开发者使用和操作：
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>

<svg>
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
x 属性定义矩形的左侧位置（例如，x=“0” 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y=“0” 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。
rx 和 ry 属性可使矩形产生圆角。

<svg>
  <ellipse cx="200" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
r属性定义圆的半径

<svg>
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

<svg>
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

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

<svg>
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
</svg>

元素用于定义一个路径。
下面的命令可用于路径数据：
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
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。