阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      SVG 矩形 <rect>

      SVG 矩形 <rect>

      SVG有一些预定义的形状元素,可被开发者使用和操作:

      • 矩形
      • 圆形
      • 椭圆
      • 线
      • 折线
      • 多边形
      • 路径

      首先从矩形元素开始。


      SVG 矩形

      标签可用来创建矩形,以及矩形的变种:

      <rect x="10" y="10" width="30" height="30"/>
      <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
      

      渲染效果



      就像你能联想到的,rect元素会在屏幕上绘制一个矩形 。其实只要6个基本属性就可以控制它在屏幕上的位置和形状。 上面的图例中最先展示了2个矩形,虽然这有点冗余了。右边的那个图形设置了rx和ry属性用来控制圆角。如果没有设置圆角,则默认为0。

      • x
        • 矩形左上角的x位置
      • y
        • 矩形左上角的y位置
      • width
        • 矩形的宽度
      • height
        • 矩形的高度
      • rx
        • 圆角的x方位的半径
      • ry
        • 圆角的y方位的半径

      矩形

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect width="300" height="100"
        style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
      </svg>
      

      渲染效果



      代码解析:

      • rect 元素的 width 和 height 属性可定义矩形的高度和宽度
      • style 属性用来定义 CSS 属性
      • CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
      • CSS 的 stroke-width 属性定义矩形边框的宽度
      • CSS 的 stroke 属性定义矩形边框的颜色

      带边框的矩形2


      让我们看看另一个例子,它包含一些新的属性:

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="50" y="20" width="150" height="150"
        style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
        stroke-opacity:0.9"/>
      </svg>
      

      渲染效果



      对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。

      代码解析:

      • x 属性定义矩形的左侧位置(例如,x=“0” 定义矩形到浏览器窗口左侧的距离是 0px)
      • y 属性定义矩形的顶端位置(例如,y=“0” 定义矩形到浏览器窗口顶端的距离是 0px)
      • CSS 的 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1)
      • CSS 的 stroke-opacity 属性定义轮廓颜色的透明度(合法的范围是:0 - 1)

      实例 3,定义整个元素的不透明度:

      下面是SVG代码:

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="50" y="20" width="150" height="150"
        style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.5;"/>
      </svg>
      

      渲染效果



      • CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。

      实例 创建一个圆角矩形:

      下面是SVG代码:

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
        style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
      </svg>
      
      • rx 和 ry 属性可使矩形产生圆角。

      什么是 “像素”?


      基本上,在 SVG 文档中的1个像素对应输出设备(比如显示屏)上的1个像素。但是这种情况是可以改变的,否则 SVG 的名字里也不至于会有“Scalable”(可缩放)这个词。

      如同CSS可以定义字体的绝对大小和相对大小,SVG也可以定义绝对大小(比如使用“pt”或“cm”标识维度)同时SVG也能使用相对大小,只需给出数字,不标明单位,输出时就会采用用户的单位。

      在没有进一步规范说明的情况下,1个用户单位等同于1个屏幕单位。要明确改变这种设定,SVG里有多种方法。我们从svg根元素开始:

      <svg width="100" height="100">
      

      上面的元素定义了一个100*100px的SVG画布,这里1用户单位等同于1屏幕单位。

      <svg width="200" height="200" viewBox="0 0 100 100">
      

      这里定义的画布尺寸是200*200px。但是,viewBox属性定义了画布上可以显示的区域:从(0,0)点开始,100宽*100高的区域。这个100*100的区域,会放到200*200的画布上显示。于是就形成了放大两倍的效果。

      用户单位和屏幕单位的映射关系被称为用户坐标系统。除了缩放之外,坐标系统还可以旋转、倾斜、翻转。默认的用户坐标系统1用户像素等于设备上的1像素(但是设备上可能会自己定义1像素到底是多大)。在定义了具体尺寸单位的SVG中,比如单位是“cm”或“in”,最终图形会以实际大小的1比1比例呈现。

      目录
      目录