一个元素代表一个 SVG 菱形。 使用此元素，您可以绘制不同长度、高度、蒙版和填充颜色的正方形。 同时还可以勾勒出直角或圆角的正方形。
SVG 圆的简单示例
下面是绘制 SVG 圆的简单示例。
SVG 方块的位置由 x 和 y 属性确定。 请记住，该位置是相对于其最接近的父元素的位置的。
SVG 圆的大小由宽度和高度属性决定。
style 属性允许您为圆设置其他样式html矩形，例如遮罩颜色、遮罩长度和填充颜色等。
下图是之前代码的返回结果：
圆角正方形
我们还可以用圆角勾勒出 SVG 圆圈的轮廓。 rx 和 ry 属性用于确定正方形圆角的大小。 rx属性决定圆角的长度，ry属性决定圆角的高度。 下例中，三个菱形的圆角分别设置为5像素、10像素和15像素，请注意观察各自圆角的大小变化。
里面代码的返回结果如下：
里面的例子中，三个圆角正方形的rx和ry值都是相同的。 如果单独设置rx的值，则ry的值与rx相同。 这是定义 SVG 圆角正方形形状的缩写形式。
在下面的两个反例中，rx的值都设置为10像素，而ry的值分别设置为5像素和15像素。 这两个反例展示了当正方形圆角的长度和高度不同时会发生什么。
里面代码的返回结果如下：
面膜圆形
您可以使用描边属性来设置 SVG 圆的边框属性。 下面的示例将圆形边框设置为红色，并将边框长度设置为 3 像素。
里面代码的返回结果如下：
您还可以使用Stroke-dasharray属性将圆的边框设置为实线。 看下面的例子：
里面代码的返回结果如下：
实心圆
您可以使用 fill 属性来用颜色填充 SVG 方块。 比如不填充圆圈的颜色。
此时，SVG圆圈的填充颜色将与浏览器页面颜色相同。
您还可以选择一种颜色来填充钻石。 下面的示例用红色填充正方形。
最后，您可以使用 fill-opacity 属性设置填充圆的不透明度。 在下面的示例中，两个短语部分叠加html矩形，内圈设置为 50% 填充不透明度。
里面代码的返回结果如下：
返回SVG教程目录
