SVG 接收属性

SVG是可缩放矢量图形，可以通过属性来控制其表现和行为。在本文中，我们将介绍一些常用的SVG接收属性和它们的用途。

fill属性

fill属性用于设置SVG元素的填充颜色。它可以接受各种颜色值和样式值（例如渐变和图案）。例如：

<rect x="10" y="10" width="100" height="100" fill="red" />

这将创建一个红色矩形。

stroke属性

stroke属性用于设置SVG元素的描边颜色。它可以接受各种颜色值。例如：

<circle cx="50" cy="50" r="40" stroke="blue" />

这将创建一个蓝色圆圈。

stroke-width属性

stroke-width属性用于设置SVG元素的描边宽度。它可以接受各种长度值。例如：

<line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="5" />

这将创建一条黑色的5像素宽的直线。

opacity属性

opacity属性用于设置SVG元素的不透明度，它可以接受0到1之间的值。例如：

<circle cx="50" cy="50" r="40" fill="green" opacity="0.5" />

这将创建一个绿色半透明圆圈。

transform属性

transform属性用于对SVG元素进行变换，例如旋转、缩放和平移。它可以接受各种变换函数。例如：

<rect x="10" y="10" width="100" height="100" fill="orange" transform="rotate(45 50 50)" />

这将创建一个橙色的矩形，以50,50为中心旋转了45度。

viewBox属性

viewBox属性定义了SVG元素的可见区域。它可以接受4个值：x、y、宽度和高度。例如：

<svg viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" fill="purple" />
</svg>

这将创建一个紫色矩形，大小为100x100，并在其中心部分显示。

总之，SVG接收属性为控制SVG元素的表现和行为提供了很多选项。熟练掌握这些属性可以让您更好地使用SVG。