突破编程_前端_SVG（rect 矩形）

原创

已于 2024-04-12 16:19:31 修改 · 3.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2024-04-10 19:26:53 首次发布

本文围绕SVG中rect元素展开，介绍其基本属性，如x、y、width等用于定义形状、位置和颜色。还讲述用CSS设置矩形颜色、边框和阴影，以及通过JavaScript为矩形添加点击事件、用SVG动画功能和transform属性实现交互与动画。此外，介绍了使用clipPath、mask、pattern属性实现裁剪、遮罩和图案填充等高级技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 rect 元素的基本属性和用法

在SVG中，<rect> 元素用于创建矩形。

<rect> 元素有一些基本的属性，可以用来定义矩形的形状、位置、颜色等。以下是这些属性的详细解释：

x 和 y ：这两个属性定义矩形左上角的位置。 x 是矩形左上角到SVG画布左边缘的水平距离， y 是矩形左上角到SVG画布上边缘的垂直距离。这两个属性的值都是长度，可以是像素值（如 “50px”），也可以是百分比值（如 “10%”）。

<rect x="10" y="20" width="100" height="50" />

在这里插入图片描述

在这个例子中，矩形的左上角位于SVG画布的(10, 20)位置。

width 和 height ：这两个属性定义矩形的宽度和高度。这两个属性的值也是长度，可以是像素值或百分比值。

<rect x="10" y="20" width="100" height="50" />

在这个例子中，矩形的宽度是100，高度是50。

rx 和 ry ：这两个属性定义矩形的圆角半径。如果只设置了 rx ，那么矩形的所有四个角都将有相同的圆角半径。如果同时设置了 rx 和 ry ，那么矩形的左上角和右下角的圆角半径为 rx ，左下角和右上角的圆角半径为 ry 。

<rect x="10" y="20" width="100" height="50" rx="10" ry="20" />

在这里插入图片描述

在这个例子中，矩形的左上角和右下角的圆角半径为10，左下角和右上角的圆角半径为20。

fill ：这个属性定义矩形的填充颜色。它接受颜色名、RGB、RGBA、HSL、HSLA 或十六进制颜色代码。如果省略此属性，矩形将不会被填充。

<rect x="10" y="20" width="100" height="50" fill="blue" />

在这里插入图片描述

在这个例子中，矩形的填充颜色是蓝色。

stroke ：这个属性定义矩形的描边颜色。与 fill 属性类似，它也接受颜色名、RGB、RGBA、HSL、HSLA 或十六进制颜色代码。如果省略此属性，矩形将没有描边。
stroke-width ：这个属性定义矩形描边的宽度。它的值是一个长度，可以是像素值或百分比值。

<rect x="10" y="20" width="100" height="50" fill="none" stroke="black" stroke-width="5" />

在这里插入图片描述

在这个例子中，矩形没有填充，但有黑色的描边，描边的宽度为5。

这些属性可以一起使用，以创建具有各种形状、位置和颜色的矩形。同时，你也可以使用CSS来样式化SVG元素，包括 <rect> 元素。例如，可以使用CSS来改变矩形的颜色、描边宽度等。

2 使用 CSS 样式设置矩形的颜色、边框和阴影

在SVG中，使用CSS样式设置元素的颜色、边框和阴影略有不同，因为SVG有自己的属性和方法来处理这些样式。以下是如何在SVG中设置元素的填充颜色（相当于背景颜色）、描边（相当于边框）和阴影的示例：

<svg width="200" height="100">  
    <style>  
        .styled-rect {
     
       
            fill: #f00; /* 设置矩形的填充颜色为红色 */  
            stroke: #00f; /* 设置矩形的描边颜色为蓝色 */  
            stroke-width: 5; /* 设置矩形的描边宽度为5 */  
            filter: drop-shadow(10px 10px 5px #0f0); /* 设置矩形的阴影 */  
        }  
    </style>  
    <rect class="styled-rect" x="10" y="20" width="100" height="50" />
</svg>

在这里插入图片描述

在这个例子中，<style> 标签被放置在 SVG 元素内部，用于定义 CSS 样式。.styled-rect 是一个类选择器，它应用于 <rect> 元素。

fill 属性用于设置矩形的填充颜色。
stroke 属性用于设置矩形的描边颜色。
stroke-width 属性用于设置矩形的描边宽度，这相当于HTML/CSS中的边框宽度。
filter 属性用于设置阴影效果，其中 drop-shadow() 函数用于创建阴影。它的参数与CSS的 box-shadow 类似，但语法略有不同。

注意：SVG 的阴影是通过 filter 和 drop-shadow() 函数来实现的，而不是像 HTML 元素那样使用 box-shadow 属性。这是因为 SVG 有自己的滤镜系统，用于实现更复杂的视觉效果。

3 SVG 矩形的交互性

3.1 使用 JavaScript 为 SVG 矩形添加点击事件

以下是一个简单的示例，演示了如何为SVG矩形添加点击事件处理器：

<svg width="200" height="100">  
    <rect id="myRect" width="100" height="50" style="fill:blue;stroke:pink;stroke-width:5;"/>  
    <script>  
        // 获取SVG矩形元素  
        var rect = document.getElementById('myRect');  
          
        // 为矩形添加点击事件处理器  
        rect.addEventListener(