SVG 基础教程

SVG 形状

SVG 滤镜

SVG 渐变

SVG 参考

SVG 矩形 <rect> 及圆角矩形以及旋转操作


矩形是最简单的基本形状,只需要指定其左上角的 x 和 y 坐标以及它的宽度(width)和高度(height)即可。矩形内部会使用 fill 属性代表的颜色进行填充,如果没有指定 fill 颜色,则会使用黑色填充,也可以指定为 none,即不填充矩形内部,保持透明。

属性

属性 说明
x 定义矩形的左侧位置(例如,x = "0" 定义矩形到浏览器窗口左侧的距离是 0px)
y 定义矩形的顶端位置(例如,y = "0" 定义矩形到浏览器窗口顶端的距离是 0px)
width 定义矩形的宽度(例如,width = "10" 定义矩形的宽度是 10px)
height 定义矩形的高度(例如,height = "30" 定义矩形的高度是 30px)
style 定义矩形填充颜色、填充透明度、边框颜色、边框宽度及边框透明度等属性
属性 说明
fill 图形内部使用哪种颜色进行填充,如果未指定,则会使用黑色填充,也可以指定为 none,即不填充图形内部,保持透明
fill-opacity 定义填充颜色透明度(合法的范围是:0 - 1)
stroke 定义图形边框的颜色
stroke-width 定义图形边框的宽度
stroke-opacity 定义轮廓颜色的透明度(合法的范围是:0 - 1)
opacity 定义元素的透明值(合法的范围是:0 - 1)

示例

<svg width="300px" height="300px" viewBox="0 0 100 100">
  <!-- 内部填充为黑色, 不绘制边框 -->
  <rect x="10" y="10" width="30" height="50"/>

  <!-- 内部不填充颜色, 绘制黑色边框 -->
  <rect x="50" y="10" width="20" height="40" style="fill: none; stroke: black;"/>

  <!-- 内部填充为蓝色, 绘制较粗的、半透明红色边框 -->
  <rect x="10" y="70" width="25" height="30"
    style="fill: #0000ff;
      stroke: red; stroke-width: 7; stroke-opacity: 0.5;"/>

  <!-- 内部填充为半透明的黄色,用虚线绘制绿色边框 -->
  <rect x="50" y="70" width="35" height="20"
    style="fill: yellow; fill-opacity: 0.5;
      stroke: green; stroke-width: 2; stroke-dasharray: 5 2"/>
</svg>

效果如下:

圆角矩形

如果希望得到一个圆角矩形,可以分别指定 x 方向和 y 方向的圆角半径。rx(x-radius,x 方向的圆角半径)的最大值是矩形宽度的一半,同理,ry(y-radius,y 方向的圆角半径)的最大值是矩形高度的一半。如果指定了 rx 和 ry 中的一个值,则认为它们相等。

具体示例如下:

<svg width="300px" height="300px" viewBox="0 0 200 200">
  <!-- rx 和 ry 相等, 逐渐增大 -->
  <rect x="10" y="10" width="20" height="40" rx="2" ry="2"
    style="stroke: black; fill: none;"/>

  <rect x="40" y="10" width="20" height="40" rx="5"
    style="stroke: black; fill: none;"/>

  <rect x="70" y="10" width="20" height="40" ry="10"
    style="stroke: black; fill: none;"/>

  <!-- rx 和 ry 不相等 -->
  <rect x="10" y="60" width="20" height="40" rx="10" ry="5"
    style="stroke: black; fill: none;"/>

  <rect x="40" y="60" width="20" height="40" rx="5" ry="10"
    style="stroke: black; fill: none;"/>
</svg>

效果如下:

矩形旋转

SVG 的旋转操作,使用 <animateTransform> 标签,设置 attributeName 为 transform,然后用 type 属性的值指定变换的哪个值(translate、scale、rotate、skewX 或 skewY 之一),旋转对应 rotate 值。from 和 to 的值指定为适当的要动画绘制的变换。

具体示例如下:

<?xml version="1.0"?>
<svg width="500" height="250">
    <rect x="50" y="50" width="50" height="50" fill="red">
        <animateTransform attributeName="transform" attributeType="XML" type="rotate"
 from="0 75 75" to="360 75 75" dur="2" repeatCount="indefinite" />
    </rect>
</svg>

效果如下: