SVG Stroke 属性

欢迎关注我公众号:AI悦创,有更多更好玩的等你发现!

公众号:AI悦创【二维码】

AI悦创原创
  • svg
  • web
  • 前端
  • svg
  • web
  • 前端
小于 1 分钟
SVG <text>

SVG 文本 - <text>

<text> 元素用于定义文本。

实例 1

写一个文本:

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>

AI悦创原创
  • svg
  • web
  • 前端
  • svg
  • web
  • 前端
大约 2 分钟
SVG <path>

SVG 路径 - <path>

<path> 元素用于定义一个路径。

下面的命令可用于路径数据:

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve

AI悦创原创
  • svg
  • web
  • 前端
  • svg
  • web
  • 前端
大约 2 分钟
SVG <polyline>

SVG 多段线 - <polyline>

实例 1

<polyline> 元素是用于创建任何只有直线的形状:

image-20221103234010946

下面是 SVG 代码:


AI悦创原创
  • svg
  • web
  • 前端
  • svg
  • web
  • 前端
大约 1 分钟
SVG <polygon>

SVG 多边形 - <polygon>

实例 1

<polygon> 标签用来创建含有不少于三个边的图形。

多边形是由直线组成,其形状是"封闭"的(所有的线条 连接起来)。

Remarkpolygon 来自希腊。 "Poly" 意味 "many" , "gon" 意味 "angle".

image-20221103231604940

AI悦创原创
  • svg
  • web
  • 前端
  • svg
  • web
  • 前端
大约 2 分钟
SVG <line>

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"/>

AI悦创原创
  • svg
  • web
  • 前端
  • svg
  • web
  • 前端
大约 1 分钟
SVG <ellipse>

SVG 椭圆 - <ellipse>

实例 1

<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"

AI悦创原创
  • svg
  • web
  • 前端
  • svg
  • web
  • 前端
大约 2 分钟
SVG <circle>

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"/>

AI悦创原创
  • svg
  • web
  • 前端
  • svg
  • web
  • 前端
大约 1 分钟
SVG <rect>

SVG Shapes

SVG有一些预定义的形状元素,可被开发者使用和操作:

  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 线 <line>
  • 折线 <polyline>
  • 多边形 <polygon>
  • 路径 <path>

下面的章节会为您讲解这些元素,首先从矩形元素开始。


SVG 矩形 - <rect>


AI悦创原创
  • svg
  • web
  • 前端
  • svg
  • web
  • 前端
大约 3 分钟
2