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

2024-04-11 07:12
文章标签 编程 前端 frontend 矩形 svg 突破 rect

本文主要是介绍3 突破编程_前端_SVG（rect 矩形），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

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

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

在这里插入图片描述

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

  1. width 和 height ：这两个属性定义矩形的宽度和高度。这两个属性的值也是长度，可以是像素值或百分比值。
<rect x="10" y="20" width="100" height="50" />

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

  1. rx 和 ry ：这两个属性定义矩形的圆角半径。如果只设置了 rx ，那么矩形的所有四个角都将有相同的圆角半径。如果同时设置了 rx 和 ry ，那么矩形的左上角和右下角的圆角半径为 rx ，左下角和右上角的圆角半径为 ry 。
<rect x="10" y="20" width="100" height="50" rx="10" ry="20" />

在这里插入图片描述

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

  1. fill ：这个属性定义矩形的填充颜色。它接受颜色名、RGB、RGBA、HSL、HSLA 或十六进制颜色代码。如果省略此属性，矩形将不会被填充。
<rect x="10" y="20" width="100" height="50" fill="blue" />

在这里插入图片描述

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

  1. stroke ：这个属性定义矩形的描边颜色。与 fill 属性类似，它也接受颜色名、RGB、RGBA、HSL、HSLA 或十六进制颜色代码。如果省略此属性，矩形将没有描边。
  2. 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('click', function(event) {  // 在控制台输出点击事件的信息  console.log('Rectangle clicked!', event);  // 你可以在这里添加其他逻辑，比如改变矩形的颜色  // rect.style.fill = 'green';  });  </script>  
</svg>

在这个例子中，我们首先通过 document.getElementById 获取到 <rect>元素的引用。然后，我们使用 addEventListener 方法为这个元素添加一个点击事件处理器。当用户点击这个矩形时，会触发这个处理器，并调用提供的函数。在这个函数中，你可以执行任何你需要的操作，比如改变矩形的颜色、显示一个弹出框，或者发送一个网络请求。

注意：addEventListener 的第一个参数是事件的名称（在这个例子中是 ‘click’），第二个参数是一个处理该事件的函数。这个函数通常接收一个 event 对象作为参数，这个对象包含了关于事件的信息，比如点击的位置、触发事件的元素等。

3.2 使用 SVG 的动画功能为矩形添加动画效果

SVG 提供了强大的动画功能，可以使用 SVG 的 <animate> 元素或者 CSS 动画和过渡来创建动画效果。

（1）使用 SVG 的 元素

可以直接在 SVG 矩形上使用 <animate> 元素来创建动画。例如，可以创建一个颜色变化的动画：

<svg width="200" height="100">  <rect width="100" height="50" style="fill:blue;">  <animate attributeName="fill" values="blue;red;green" dur="3s" repeatCount="indefinite" />  </rect>  
</svg>

在这个例子中，<animate> 元素改变了矩形的 fill 属性值。values 属性定义了颜色变化的序列，dur 属性定义了动画的持续时间，而 repeatCount 属性决定了动画应该重复多少次（indefinite 表示无限次）。

（2）使用 CSS 动画

也可以使用 CSS 来定义 SVG 元素的动画。首先，需要给 SVG 矩形添加一个类名，然后在 CSS 中定义动画：

<svg width="200" height="100">  <rect class="animated-rect" width="100" height="50" style="fill:blue;">  <!-- 无需使用 <animate> 元素 -->  </rect>  
</svg>  <style>  @keyframes colorChange {  0% { fill: blue; }  50% { fill: red; }  100% { fill: green; }  }  .animated-rect {  animation-name: colorChange;  animation-duration: 3s;  animation-iteration-count: infinite;  }  
</style>

在这个例子中，我们定义了一个名为 colorChange 的关键帧动画，它会在 3 秒内改变矩形的填充颜色。然后，我们将这个动画应用到具有 animated-rect 类名的 元素上。animation-name 指定了要使用的动画名称，animation-duration 定义了动画的持续时间，而 animation-iteration-count 定义了动画应该重复的次数（infinite 表示无限次）。

（3）使用 JavaScript 触发动画

如果想要通过 JavaScript 来触发或控制动画，则可以给动画定义一个名称，并使用 JavaScript 来添加或移除类名，或者使用 JavaScript 来修改 CSS 属性。以下是一个简单的例子，展示了如何使用 JavaScript 来添加类名从而启动动画：

<svg width="200" height="100">  <rect id="myAnimatedRect" width="100" height="50" style="fill:blue;">  <!-- 无需使用 <animate> 元素 -->  </rect>  
</svg>  <style>  .animated-rect {  animation-name: colorChange;  animation-duration: 3s;  animation-iteration-count: infinite;  }  @keyframes colorChange {  0% { fill: blue; }  50% { fill: red; }  100% { fill: green; }  }  
</style>  <script>  // 获取 SVG 矩形元素  var rect = document.getElementById('myAnimatedRect');  // 添加类名以启动动画  rect.classList.add('animated-rect');  // 在某个时刻，你可以通过移除类名来停止动画  // rect.classList.remove('animated-rect');  
</script>

在这个例子中，我们首先在 CSS 中定义了一个动画和对应的类名。然后，在 JavaScript 中，我们获取了 SVG 矩形的引用，并添加了 animated-rect 类名来启动动画。如果需要在某个时刻停止动画，可以移除这个类名。

3.3 使用 SVG 的 transform 属性实现矩形的变换

SVG 的 transform 属性允许改变元素的位置、大小、倾斜和旋转。使用 JavaScript，可以动态地控制这些变换，为 SVG 元素添加交互性和动画效果。

以下是一个示例，演示如何使用 JavaScript 控制 SVG 矩形的变换：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>header tab</title><style>html {height: 100%;}body {margin: 0;height: 100%;}</style>
</head><body><button onclick="translateRect()">移动矩形</button>  <button onclick="scaleRect()">缩放矩形</button>  <button onclick="rotateRect()">旋转矩形</button>  <svg width="200" height="200">  <rect id="myRect" width="50" height="50" style="fill:blue;"/>  <script>  function translateRect() {  var rect = document.getElementById('myRect');  // 使用 translate 函数移动矩形  // 参数分别是 x 和 y 轴的移动量  rect.setAttribute('transform', 'translate(50, 50)');  }  function scaleRect() {  var rect = document.getElementById('myRect');  // 使用 scale 函数缩放矩形  // 参数分别是 x 和 y 轴的缩放因子  rect.setAttribute('transform', 'scale(1.5)');  }  function rotateRect() {  var rect = document.getElementById('myRect');  // 获取当前的变换矩阵  var currentTransform = rect.getAttribute('transform') || '';  // 使用 rotate 函数旋转矩形  // 参数是旋转的角度（以度为单位）  // 如果之前有变换，需要使用空格分隔  rect.setAttribute('transform', currentTransform + ' rotate(45)');  }  </script>  
</svg>
</body></html>

在这个例子中，我们创建了一个蓝色的矩形，并提供了三个按钮来控制矩形的变换。每个按钮都关联一个 JavaScript 函数，这些函数分别用于移动、缩放和旋转矩形。

  • translateRect 函数使用 translate 变换来移动矩形。它接受两个参数，分别表示在 x 轴和 y 轴上移动的距离。
  • scaleRect 函数使用 scale 变换来缩放矩形。它接受两个参数，分别表示在 x 轴和 y 轴上的缩放因子。如果两个参数相同，则矩形会等比例缩放；如果不同，则矩形会按不同比例缩放。
  • rotateRect 函数使用 rotate 变换来旋转矩形。它接受一个参数，表示旋转的角度（以度为单位）。注意，如果元素之前已经有变换（如平移或缩放），你需要先获取当前的变换矩阵，并在新变换前加上这个矩阵，以确保变换是累加的。

4 高级 SVG 矩形技巧

4.1 使用 SVG 的 clipPath 属性裁剪矩形

SVG 的 clipPath 属性允许你定义一个裁剪区域，只有该区域内的部分才会被显示出来。这对于创建各种形状和效果的裁剪非常有用。以下是一个示例，演示如何使用 clipPath 属性来裁剪一个矩形：

<svg width="200" height="200">  <!-- 定义裁剪路径 -->  <defs>  <clipPath id="myClip">  <rect x="50" y="50" width="100" height="100" />  </clipPath>  </defs>  <!-- 使用裁剪路径的矩形 -->  <rect x="0" y="0" width="200" height="200" style="fill:blue; clip-path: url(#myClip);" />  
</svg>

裁剪前：
在这里插入图片描述

裁剪后：
在这里插入图片描述

在这个例子中，我们首先在 <defs> 元素中定义了一个 clipPath。这个 clipPath 包含一个矩形，其位置和大小定义了裁剪区域。id 属性为 clipPath 提供了一个唯一的标识符，以便我们可以在其他地方引用它。

然后，我们创建了一个较大的蓝色矩形，并使用了 clip-path 属性来应用我们之前定义的裁剪路径。clip-path 属性的值是一个 URL，它指向了我们定义的 clipPath 的 id。这意味着只有位于裁剪区域内的矩形部分（即坐标 (50, 50)，宽度和高度均为 100 的区域）会被显示出来。

如果你想要通过 JavaScript 动态地改变裁剪区域，你可以修改 clipPath 中的矩形元素。例如：

<button onclick="updateClipPath()">更新裁剪区域</button> 
<svg width="200" height="200">  <defs>  <clipPath id="myClip">  <rect id="clipRect" x="50" y="50" width="100" height="100" />  </clipPath>  </defs>  <rect x="0" y="0" width="200" height="200" style="fill:blue; clip-path: url(#myClip);" />  <script>  function updateClipPath() {  var clipRect = document.getElementById('clipRect');  // 修改裁剪区域的位置和大小  clipRect.setAttribute('x', 10);  clipRect.setAttribute('y', 10);  clipRect.setAttribute('width', 150);  clipRect.setAttribute('height', 150);  }  </script>   
</svg>

在这个改进的例子中，我们给 clipPath 中的矩形元素添加了一个 id（clipRect）。然后，我们创建了一个 JavaScript 函数 updateClipPath，该函数会修改 clipRect 的 x、y、width 和 height 属性，从而改变裁剪区域的大小和位置。最后，我们添加了一个按钮，当点击该按钮时，会调用 updateClipPath 函数并更新裁剪区域。

4.2 使用 SVG 的 mask 属性为矩形添加遮罩效果

SVG 的 mask 属性允许你使用遮罩来隐藏元素的某些部分，从而创建出复杂的视觉效果。遮罩元素通常包含一个黑白图像，其中白色区域表示完全可见，黑色区域表示完全透明，而灰色区域则表示部分透明。

以下是一个示例，演示如何使用 SVG 的 mask 属性为矩形添加遮罩效果：

<svg width="200" height="200">  <!-- 定义遮罩 -->  <mask id="myMask">  <rect width="200" height="200" fill="white" />  <circle cx="100" cy="100" r="50" fill="black" />  </mask>  <!-- 使用遮罩的矩形 -->  <rect x="0" y="0" width="200" height="200" style="fill:blue; mask: url(#myMask);" />  
</svg>

在这里插入图片描述

在这个例子中，我们首先定义了一个遮罩，其 id 为 myMask。遮罩包含一个白色的矩形背景和一个黑色的圆形。因为黑色表示完全透明，所以这个圆形区域内的内容将会在应用遮罩时被隐藏。

接下来，我们创建了一个蓝色的矩形，并使用了 mask 属性来应用我们之前定义的遮罩。mask 属性的值是一个 URL，它指向了我们定义的遮罩的 id。

这样，当遮罩应用于矩形时，圆形区域内的蓝色矩形部分将变得透明，从而创建出一个带有圆形透明区域的矩形效果。

如果你想要通过 JavaScript 动态地改变遮罩的效果，你可以修改遮罩中的元素。例如，你可以改变圆形的大小、位置或颜色来创建不同的遮罩效果。以下是一个简单的例子，通过点击按钮来动态改变遮罩中的圆形半径：

<button onclick="changeMaskRadius()">改变遮罩圆形半径</button>  
<svg width="200" height="200">  <mask id="myMask">  <rect width="200" height="200" fill="white" />  <circle id="maskCircle" cx="100" cy="100" r="50" fill="black" />  </mask>  <rect x="0" y="0" width="200" height="200" style="fill:blue; mask: url(#myMask);" />  <script>  function changeMaskRadius() {  var maskCircle = document.getElementById('maskCircle');  // 改变遮罩中圆形的半径  var newRadius = Math.random() * 100; // 随机生成新半径  maskCircle.setAttribute('r', newRadius);  }  </script>  
</svg>

在这个改进的例子中，我们给遮罩中的圆形元素添加了一个 id（maskCircle）。然后，我们创建了一个 JavaScript 函数 changeMaskRadius，该函数会获取 maskCircle 元素，并随机生成一个新的半径值来设置给 r 属性。最后，我们添加了一个按钮，当点击该按钮时，会调用 changeMaskRadius 函数并改变遮罩中圆形的半径，从而动态地改变遮罩效果。

4.3 使用 SVG 的 pattern 属性为矩形添加图案填充

SVG 的 pattern 属性允许定义一个图案，并将其用作其他形状（如矩形、圆形等）的填充。这样，就可以创建具有复杂填充模式的图形。

下面是一个使用 SVG 的 pattern 属性为矩形添加图案填充的示例：

<svg width="240" height="240">  <!-- 定义图案 -->  <defs>  <pattern id="myPattern" width="80" height="80" patternUnits="userSpaceOnUse">  <circle cx="40" cy="40" r="40" fill="blue" />  <circle cx="40" cy="40" r="10" fill="white" />  </pattern>  </defs>  <!-- 使用图案填充的矩形 -->  <rect x="0" y="0" width="240" height="240" fill="url(#myPattern)" />  
</svg>

在这里插入图片描述

在这个例子中，我们首先定义了一个图案，其 id 为 myPattern。图案的大小为 10x10 单位，并且我们使用了 patternUnits=“userSpaceOnUse”，这意味着图案的宽度和高度是相对于用户空间坐标系的。

图案中包含了两个圆形，一个大的灰色圆形和一个小的白色圆形。白色圆形位于灰色圆形的中心，形成了一种靶心图案的效果。

接下来，我们创建了一个矩形，并使用 fill 属性来引用我们之前定义的图案。fill 属性的值是一个 URL，它指向了我们定义的图案的 id。

这样，当图案应用于矩形时，矩形的填充将会呈现出我们定义的图案效果。

开发者可以根据需要修改图案中的形状、颜色、大小等属性，以创建出不同的填充效果。同样，也可以通过 JavaScript 动态地改变图案的定义，从而动态地改变矩形的填充图案。

这篇关于3 突破编程_前端_SVG（rect 矩形）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/893406。

相关文章

Java AOP面向切面编程的概念和实现方式

Java AOP面向切面编程的概念和实现方式

《JavaAOP面向切面编程的概念和实现方式》AOP是面向切面编程,通过动态代理将横切关注点（如日志、事务）与核心业务逻辑分离,提升代码复用性和可维护性,本文给大家介绍JavaAOP面向切面编程的概... 目录一、AOP 是什么？二、AOP 的核心概念与实现方式核心概念实现方式三、Spring AOP 的关
阅读更多...
vite搭建vue3项目的搭建步骤

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境
阅读更多...
Nginx搭建前端本地预览环境的完整步骤教学

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件：nginx.conf脚本化操作：nginx.shnpm 脚本集成总结：对前端的意义很多
阅读更多...
前端缓存策略的自解方案全解析

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,：本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”：浏览器到底缓存了谁？三、设计思路：把“发版”做成“自愈”四、代码
阅读更多...
通过React实现页面的无限滚动效果

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢？... 目录1. 早期的解决方案2. 交叉观察者：IntersectionObserver2.1 Inter
阅读更多...
Vue3视频播放组件 vue3-video-play使用方式

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v
阅读更多...
JS纯前端实现浏览器语音播报、朗读功能的完整代码

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面：本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本：① 语音自选参数，按钮控制语音：② 效果图：二、朗读多条文本：① 语音有默认值：②
阅读更多...
vue监听属性watch的用法及使用场景详解

vue监听属性watch的用法及使用场景详解

《vue监听属性watch的用法及使用场景详解》watch是vue中常用的监听器,它主要用于侦听数据的变化,在数据发生变化的时候执行一些操作,：本文主要介绍vue监听属性watch的用法及使用场景... 目录1. 监听属性 watch2. 常规用法3. 监听对象和route变化4. 使用场景附Watch 的
阅读更多...
前端导出Excel文件出现乱码或文件损坏问题的解决办法

前端导出Excel文件出现乱码或文件损坏问题的解决办法

《前端导出Excel文件出现乱码或文件损坏问题的解决办法》在现代网页应用程序中,前端有时需要与后端进行数据交互,包括下载文件,：本文主要介绍前端导出Excel文件出现乱码或文件损坏问题的解决办法,... 目录1. 检查后端返回的数据格式2. 前端正确处理二进制数据方案 1：直接下载（推荐）方案 2：手动构造
阅读更多...
Vue实现路由守卫的示例代码

Vue实现路由守卫的示例代码

《Vue实现路由守卫的示例代码》Vue路由守卫是控制页面导航的钩子函数,主要用于鉴权、数据预加载等场景,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一、概念二、类型三、实战一、概念路由守卫（Navigation Guards）本质上就是 在路
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2