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比例呈现。

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了