SVG 形状渲染属性

SVG（可缩放矢量图形）是一种基于 XML 的矢量图形格式，能够在网页中以任何大小无失真地渲染。而形状则是 SVG 中的一种基本元素，如矩形、圆形、椭圆等，可以通过多种方式进行渲染。以下是 SVG 形状渲染属性的介绍。

fill 属性

fill 属性用于设置 SVG 形状填充颜色，可以使用颜色名称、十六进制颜色码、RGB 或 RGBA 编码，甚至可以使用渐变或图案填充，例如：

<rect x="20" y="20" width="100" height="50" fill="red" />
<circle cx="75" cy="75" r="50" fill="#00ff00" />
<ellipse cx="150" cy="75" rx="80" ry="50" fill="url(#gradient)" />

其中，第一个矩形填充了红色，第二个圆形填充了绿色，第三个椭圆则使用了一个名为“gradient”的渐变填充。这个渐变可能定义为以下这个样式：

<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
  <stop offset="0%" stop-color="white" />
  <stop offset="100%" stop-color="black" />
</linearGradient>

这个渐变从白色到黑色渐变，垂直渐变。

stroke 属性

stroke 属性用于设置 SVG 形状的线条颜色和宽度，默认值为“none”，表示不显示线条。与 fill 属性类似，stroke 可以使用颜色名称、十六进制颜色码、RGB 或 RGBA 编码，也可以使用渐变或图案填充，例如：

<rect x="20" y="20" width="100" height="50" stroke="blue" stroke-width="2" />
<circle cx="75" cy="75" r="50" stroke="#ff0000" stroke-width="5" />
<ellipse cx="150" cy="75" rx="80" ry="50" stroke="url(#gradient)" stroke-width="10" />

其中，第一个矩形设置了蓝色线条，线条宽度为 2 像素，第二个圆形设置了红色线条，线条宽度为 5 像素，第三个椭圆设置了名为“gradient”的渐变线条，线条宽度为 10 像素。

stroke-dasharray 属性

stroke-dasharray 属性用于设置 SVG 形状的虚线样式。可以使用一系列数字来指定实线和空白间隔的长度，如“5 10”表示 5 个像素的实线和 10 个像素的空白间隔，再次出现实线时又是 5 个像素的实线和 10 个像素的空白间隔，以此类推，例如：

<rect x="20" y="20" width="100" height="50" stroke="blue" stroke-dasharray="5 10 5" />

这个矩形的线条为蓝色，样式为“5 10 5”，表示 5 个像素的实线、10 个像素的空白间隔、5 个像素的实线。如果设置为“none”或“0”，则表示实线。如果只指定了一个数字，则表示实线和空白的长度相同。

stroke-linecap 属性

stroke-linecap 属性用于设置 SVG 形状线条的端点样式。有三种取值：

• butt：平直的线条端点；
• round：圆形的线条端点；
• square：正方形的线条端点。

<rect x="20" y="20" width="100" height="50" stroke="blue" stroke-linecap="round" />

这个矩形的线条为蓝色，端点样式为圆形。

stroke-linejoin 属性

stroke-linejoin 属性用于设置 SVG 形状线条的连接方式，即连接线两侧的样式。有三种取值：

• miter：尖角连接；
• round：圆角连接；
• bevel：斜角连接。

<rect x="20" y="20" width="100" height="50" stroke="blue" stroke-linejoin="bevel" />

这个矩形的线条为蓝色，连接方式为斜角连接。

以上就是 SVG 形状渲染属性的介绍，还有很多其他的属性，为 SVG 的形状渲染带来更多样化的效果，例如渐变填充、图案填充、渐变线条等等。更详细的属性介绍可以参考 SVG 标准文档。