svg标签用法
SVG标签用法
SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，可以使用SVG标签实现各种图形效果。下面详细介绍一些常用的SVG标签及其用法。
<svg>
<svg>标签用于创建SVG图像容器。可以设置宽度、高度、背景颜等属性。
属性
•width：设置SVG图像的宽度。
•height：设置SVG图像的高度。
•style：设置SVG图像的样式。
示例
<svg width="100" height="100" style="background-color:lightgray">
 
</svg>
<rect>
<rect>标签用于创建矩形。可以设置矩形的位置、大小、颜等属性。
属性
•x：设置矩形左上角的x坐标。
•y：设置矩形左上角的y坐标。
•width：设置矩形的宽度。
•height：设置矩形的高度。
•fill：设置矩形的填充颜。
示例
<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="blue"/>
</svg>
<circle>
<circle>标签用于创建圆形。可以设置圆形的圆心位置、半径、颜等属性。
属性
•cx：设置圆形的圆心的x坐标。
•cy：设置圆形的圆心的y坐标。
•r：设置圆形的半径。
•fill：设置圆形的填充颜。
示例
<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="red"/>
</svg>
<line>
<line>标签用于创建直线。可以设置直线的起点、终点、颜等属性。
属性
•x1：设置直线起点的x坐标。
•y1：设置直线起点的y坐标。
•x2：设置直线终点的x坐标。
•y2：设置直线终点的y坐标。
•stroke：设置直线的颜。
示例
<svg width="200" height="200">
  <line x1="50" y1="50" x2="150" y2="150" stroke="green"/>
</svg>
<text>
<text>标签用于插入文本内容。可以设置文本的位置、颜、字体等属性。
属性
•x：设置文本的起点的x坐标。
•y：设置文本的起点的y坐标。
•fill：设置文本的颜。
•font-size：设置文本的字体大小。
示例
<svg svg图形width="200" height="200">
  <text x="50" y="100" fill="black" font-size="20">Hello SVG</text>
</svg>
以上是一些常用的SVG标签及其用法，通过组合这些标签可以创建出各种复杂的图形效果。请根据实际需求选择不同的SVG标签来实现所需的效果。
<path>
<path>标签用于创建路径。可以使用路径命令描述一个复杂的图形。
属性
•d：设置路径的命令和参数。具体的路径命令参考SVG规范。
示例
<svg width="200" height="200">
  <path d="M50,50 L150,50 L100,150 Z" fill="orange"/>
</svg>
<polygon>
<polygon>标签用于创建多边形。可以设置多边形的顶点坐标、颜等属性。
属性
•points：设置多边形各顶点的坐标。以空格分隔每个顶点的x和y坐标。
示例
<svg width="200" height="200">
  <polygon points="100,50 150,150 50,150" fill="yellow"/>
</svg>
<ellipse>
<ellipse>标签用于创建椭圆。可以设置椭圆的中心点坐标、x和y轴的半径、颜等属性。
属性
•cx：设置椭圆的中心点的x坐标。
•cy：设置椭圆的中心点的y坐标。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。