跳至主要內容
SVG Stroke 属性

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

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

AI悦创原创...小于 1 分钟svgweb前端svgweb前端
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>
</svg>

AI悦创原创...大约 2 分钟svgweb前端svgweb前端
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
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

AI悦创原创...大约 2 分钟svgweb前端svgweb前端
SVG <polyline>

SVG 多段线 - <polyline>

实例 1

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

AI悦创原创...大约 1 分钟svgweb前端svgweb前端
SVG <polygon>

SVG 多边形 - <polygon>

实例 1

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

AI悦创原创...大约 2 分钟svgweb前端svgweb前端
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"/>
</svg>

AI悦创原创...大约 1 分钟svgweb前端svgweb前端
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"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

AI悦创原创...大约 2 分钟svgweb前端svgweb前端
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"/>
</svg>

AI悦创原创...大约 1 分钟svgweb前端svgweb前端
SVG <rect>

SVG Shapes

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

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

AI悦创原创...大约 3 分钟svgweb前端svgweb前端
2