跳至主要內容
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