一个元素代表一个SVG矩形。通过这个元素你可以画出不同宽度，不同高度，以及不同描边和不同填充颜色的矩形。同时它还可以绘制直角或圆角的矩形。 一个SVG矩形的简单例子 下面是一个绘制SVG矩形的简单例子。
-
复制代码
SVG矩形的位置由x和y属性决定。请记住，这个位置是相对于任何它最接近的父元素的位置。 SVG矩形的尺寸由width和height属性决定。 style属性允许你为矩形设置附加的样式，如描边色，描边宽度和填充色等。
下面的图形是上面代码的返回结果：
圆角矩形 我们也可以绘制圆角的SVG矩形。rx和ry属性用于决定矩形圆角的大小。rx属性决定圆角的宽度，ry属性则决定圆角的高度。下面的例子中，三个矩形的圆角分别被设置为5像素、10像素和15像素，请注意观察他们各自圆角的大小变化。
-
复制代码
上面的代码的返回结果如下：
上面的例子中，三个圆角矩形的rx和ry值都是相同的。如果你单独设置了rx的值，那么ry的值和rx相同。这是定义SVG圆角矩形的简写方式。 下面的两个例子中，rx的值都设置为10像素，但是ry的值分别设置为5像素和15像素。这两个例子展示了矩形圆角的宽度和高度不相同时的情况。
-
复制代码
上面的代码的返回结果如下：
描边矩形 你可以使用stroke属性来设置SVG矩形的边框属性。下面的例子设置矩形的边框为绿色，边框的宽度为3像素。
-
- style="stroke: #009900;
- stroke-width: 3;
- fill: none;
- "
- />
复制代码
上面的代码的返回结果如下：
你还可以使用stroke-dasharray属性将矩形的边框设置为虚线。看下面的例子：
-
- style="stroke: #009900;
- stroke-width: 3;
- stroke-dasharray: 10 5;
- fill: none;
- "
- />
复制代码
上面的代码的返回结果如下：
填充矩形 你可以使用fill属性来为SVG矩形填充颜色。例如将矩形的颜色填充为none。
-
- style="stroke: #009900;
- fill: none;
- "
- />
复制代码
这时，SVG矩形的填充色将和浏览器的页面颜色一样。
你也可以选择一种颜色来填充矩形。下面的例子将矩形填充为绿色。
-
- style="stroke: #009900;
- fill: #33ff33;
- "
- />
复制代码
最后，你可以用fill-opacity属性来设置填充矩形的透明度。下面的例子中，两个句子部分叠加在一起，上面的矩形设置为50%的填充透明度。
-
- style="stroke: #009900;
- fill: #33ff33;
- "
- />
-
- style="stroke: #000099;
- fill: #3333ff;
- fill-opacity: 0.5;
- "
- />
复制代码
上面的代码的返回结果如下：
本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/ziliaoku/ ... g/201506031964.html
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
