突破编程_前端_SVG（ellipse 椭圆形）

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

ellipse 元素用于创建椭圆形状。它具有一系列的基本属性，允许自定义椭圆的外观和位置。以下是一些 ellipse 元素的基本属性和用法：

（1）基本属性

  1. cx 和 cy：这两个属性定义了椭圆中心的 x 和 y 坐标。默认情况下，椭圆的中心位于坐标系的原点（0,0）。
  2. rx 和 ry：这两个属性分别定义了椭圆在 x 轴和 y 轴上的半径。这决定了椭圆的大小和形状。
  3. fill：这个属性用于设置椭圆内部的填充颜色。你可以使用颜色名称、十六进制颜色代码、RGB 值等来指定颜色。如果不设置填充颜色，椭圆将默认不填充（透明）。
  4. stroke：这个属性用于设置椭圆的描边颜色。同样，你可以使用各种颜色格式来指定描边颜色。
  5. stroke-width：这个属性用于设置椭圆的描边宽度。描边宽度的值是非负整数，默认为 1。如果设置为 0，椭圆将没有描边。
  6. stroke-linecap：这个属性定义了描边端点的形状，可以取值 “butt”（默认值）、“round” 或 “square”。
  7. stroke-linejoin：这个属性定义了描边在两条线交叉时的连接方式，可以取值 “miter”（默认值）、“round” 或 “bevel”。

（2）用法示例

以下是一个简单的SVG示例，展示了如何使用 ellipse 元素及其基本属性来创建一个带有描边和填充颜色的椭圆：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><ellipse cx="100" cy="100" rx="50" ry="30" fill="blue" stroke="red" stroke-width="2" />
</svg>

在这里插入图片描述

在这个示例中，我们创建了一个宽度为200、高度为200的SVG画布。在画布上，我们使用 ellipse 元素创建了一个椭圆。椭圆的中心位于(100,100)，x轴半径为50，y轴半径为30。椭圆内部填充为蓝色，描边为红色，描边宽度为2。

2 高级 ellipse 元素的样式设置

2.1 使用 CSS 为 ellipse 元素添加样式

当使用CSS为SVG中的 ellipse 元素添加样式时，你可以通过内联样式、内部样式表或外部样式表来实现。SVG是XML的一种形式，因此它可以接受内联样式，也可以链接到外部的CSS样式表。下面我们将详细讲解如何使用这些方法为 ellipse 元素添加样式。

（1）内联样式

内联样式是直接在 SVG 元素上通过 style 属性添加 CSS 样式。这种方法的优点是简单直观，但缺点是如果多个元素需要相同的样式，会造成代码冗余。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><ellipse cx="100" cy="100" rx="50" ry="30"style="fill:blue; stroke:red; stroke-width:2;" />
</svg>

在这个例子中， ellipse 元素的 style 属性中定义了填充颜色（ fill ）、描边颜色（ stroke ）和描边宽度（ stroke-width ）。

（2）内部样式表

内部样式表是将 CSS 样式定义在SVG文档的 <style> 元素内。这种方式可以让你复用样式规则，减少代码冗余。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><style>.myEllipse {fill: blue;stroke: red;stroke-width: 2;}</style><ellipse cx="100" cy="100" rx="50" ry="30" class="myEllipse" />
</svg>

在这个例子中，我们定义了一个 CSS 类 .myEllipse ，并在 ellipse 元素上通过 class 属性应用了这个类。这样，我们就可以在多个 ellipse 元素上复用这个样式了。

（3）外部样式表

如果有一个大型的 SVG 文档或者多个 SVG 文档需要共享相同的样式，则可以考虑使用外部样式表。外部样式表是一个单独的 CSS 文件，你可以通过SVG文档的 <link> 元素或HTML文档的 <style> 元素引用它。

假设有一个名为 styles.css 的外部样式表，内容如下：

.myEllipse {fill: blue;stroke: red;stroke-width: 2;
}

在 SVG 文档中，可以这样引用它：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@import url('styles.css');</style></defs><ellipse cx="100" cy="100" rx="50" ry="30" class="myEllipse" />
</svg>

注意，这里使用了 defs 元素来包含 style 元素，这是 SVG 中用于定义可重用的元素和属性的地方。同时，我们添加了 xmlns:xlink 命名空间声明，因为 @import 规则是 XLink 规范的一部分。

（4）注意事项

  • SVG 的 CSS 属性与 HTML 中的 CSS 属性大部分相同，但也有一些特定的 SVG 属性，如 fill 、 stroke 等，这些属性在 SVG 中有特殊的意义。
  • 样式规则的优先级同样适用于 SVG。如果有多个规则应用于同一个元素，则最后定义的规则或者具有更高优先级的规则将生效。

通过这些方法，可以灵活地为 SVG 中的 ellipse 元素添加样式，并根据需要调整它们的外观。

2.2 使用渐变填充

在SVG中，你可以使用渐变来填充ellipse元素，从而创建出丰富多样的视觉效果。SVG提供了两种类型的渐变：线性渐变（linearGradient）和径向渐变（radialGradient）。这些渐变可以通过定义一系列的颜色停止点（stop）来创建平滑的颜色过渡。

下面，我将详细讲解如何使用这两种渐变来填充ellipse元素。

（1）线性渐变填充

线性渐变是沿着一条直线平滑地过渡的颜色。可以指定渐变的起始点和结束点，以及中间的颜色停止点。

下面是一个使用线性渐变填充 ellipse 元素的示例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:red; stop-opacity:1" /><stop offset="100%" style="stop-color:blue; stop-opacity:1" /></linearGradient></defs><ellipse cx="100" cy="100" rx="50" ry="30" fill="url(#myGradient)" />
</svg>

在这里插入图片描述

在这个例子中：

  • <defs> 元素用于定义可重用的元素，如渐变。
  • <linearGradient> 元素定义了线性渐变。id 属性为渐变提供了一个唯一的标识符，以便稍后在 ellipse 元素的 fill 属性中引用它。
  • x1, y1, x2, y2 属性定义了渐变的起始点和结束点。在这个例子中，渐变从左到右（从0%到100%）。
  • <stop> 元素定义了渐变中的颜色停止点。offset 属性指定了停止点在渐变中的位置（以百分比表示）。stop-color 和 stop-opacity 属性定义了停止点的颜色和透明度。
  • ellipse 元素的 fill 属性通过 url(#myGradient) 引用了之前定义的渐变。

（2）径向渐变填充

径向渐变从中心点向外平滑地过渡颜色，通常创建出类似于光环或圆晕的效果。

下面是一个使用径向渐变填充 ellipse 元素的示例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><defs><radialGradient id="myRadialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"><stop offset="0%" style="stop-color:yellow; stop-opacity:1" /><stop offset="100%" style="stop-color:green; stop-opacity:1" /></radialGradient></defs><ellipse cx="100" cy="100" rx="50" ry="30" fill="url(#myRadialGradient)" />
</svg>

在这里插入图片描述

在这个例子中：

  • <radialGradient> 元素定义了径向渐变。
  • cx 和 cy 属性定义了渐变的中心点。
  • r 属性定义了渐变的半径，即颜色从中心向外扩散的范围。
  • fx 和 fy 属性是可选的，它们定义了渐变的焦点，即颜色最亮或最浓的位置。在这个例子中，焦点与中心点相同。
  • 其余部分与线性渐变示例类似，包括定义颜色停止点和在 ellipse 元素中使用渐变填充。

2.3 使用阴影效果

在 SVG 中，为 ellipse 元素添加阴影效果可以通过使用 filter 元素结合内置的 feDropShadow 滤镜来实现。阴影效果能够增强 ellipse 元素的立体感和层次感，使图形更加生动。

（1）定义阴影滤镜

首先，需要在SVG文档的 部分定义一个阴影滤镜。这个滤镜使用 feDropShadow 元素来创建阴影效果。 

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><defs><filter id="dropShadow"><feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="black" flood-opacity="0.5" /></filter></defs><!-- 其余的SVG内容 -->
</svg>

在这个例子中：

  • filter 元素定义了一个滤镜，并通过 id 属性给它一个唯一的标识符（这里是 dropShadow ）。
  • feDropShadow 元素用于创建阴影效果。
  • dx 和 dy 属性分别控制阴影在X轴和Y轴上的偏移量。正值将阴影向右和向下移动。
  • stdDeviation 属性控制阴影的模糊程度。值越大，阴影的边缘越模糊。
  • flood-color 属性设置阴影的颜色。
  • flood-opacity 属性设置阴影的不透明度。

（2）应用阴影滤镜到 ellipse 元素

接下来，需要将定义的阴影滤镜应用到 ellipse 元素上。这可以通过在 ellipse 元素的 filter 属性中引用滤镜的 id 来实现。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><defs><filter id="dropShadow"><feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="black" flood-opacity="0.5" /></filter></defs><ellipse cx="100" cy="100" rx="50" ry="30" style="fill:blue;" filter="url(#dropShadow)" />
</svg>

在这里插入图片描述

在这个例子中：

  • ellipse 元素的 filter 属性引用了之前定义的阴影滤镜，通过 url(#dropShadow) 来指定。
  • style 属性设置了 ellipse 元素的填充颜色。

（3）调整阴影效果

可以通过调整 feDropShadow 元素的属性来精细控制阴影效果。例如，增加 dx 和 dy 的值将使阴影更远地偏离椭圆；增加 stdDeviation 的值将使阴影更加模糊；改变 flood-color 和 flood-opacity 的值将改变阴影的颜色和不透明度。

（4）注意事项

  • 阴影滤镜可能会对性能产生一定的影响，特别是在复杂的 SVG 图形或动画中。因此，在性能敏感的应用中，应谨慎使用阴影效果。
  • 滤镜效果是 SVG 的强大特性之一，但并非所有浏览器都完全支持所有的滤镜效果。在使用时，建议检查目标浏览器的兼容性。

3 使用 JavaScript 操作 ellipse 元素

使用 JavaScript 操作 ellipse 元素可以让动态地改变其属性、样式、位置或行为。

（1）创建和添加 ellipse 元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Circle with JavaScript</title>
</head>
<body>
<svg id="mySvg" width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- SVG content will be added here -->
</svg><script>// 创建ellipse元素var ellipse = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");// 设置ellipse的属性ellipse.setAttribute("cx", 100);ellipse.setAttribute("cy", 100);ellipse.setAttribute("rx", 50);ellipse.setAttribute("ry", 30);ellipse.setAttribute("fill", "blue");// 获取SVG元素var svg = document.getElementById("mySvg");// 将ellipse添加到SVG中svg.appendChild(ellipse);
</script>
</body>
</html>

（2）改变 ellipse 的属性

<script>// 假设ellipse已经存在于SVG中var ellipse = document.querySelector("#mySvg ellipse");// 改变圆心位置ellipse.setAttribute("cx", 150);ellipse.setAttribute("cy", 150);// 改变半径ellipse.setAttribute("rx", 60);ellipse.setAttribute("ry", 40);// 改变填充颜色ellipse.setAttribute("fill", "green");
</script>

（3）使用 CSS 样式操作 ellipse

<style>.myEllipse {fill: red;stroke: black;stroke-width: 2;}
</style><script>var ellipse = document.querySelector("#mySvg ellipse");// 添加CSS类来改变样式ellipse.classList.add("myEllipse");// 稍后，你可以移除或切换类来更改样式ellipse.classList.remove("myEllipse");ellipse.classList.add("anotherClass");
</script>

（4）使用 JavaScript 监听和响应事件

<script>var ellipse = document.querySelector("#mySvg ellipse");// 添加点击事件监听器ellipse.addEventListener("click", function() {alert("Circle clicked!");// 例如，改变 cxthis.setAttribute("cx",  parseInt(this.getAttribute("cx")) + 10);});
</script>

（5）使用 JavaScript 进行动画

<script>  // 获取椭圆元素  const ellipse = document.getElementById('myEllipse');  // 初始位置  let xPos = 0;  // 动画函数  function animateEllipse() {  // 更新椭圆的位置  xPos += 2; // 每次增加2个单位  if (xPos > 400 - 50) { // 如果椭圆到达SVG的右边边界，则反向移动  xPos = 0;  }  // 设置新的cx属性值  ellipse.setAttribute('cx', xPos);  // 请求下一帧动画  requestAnimationFrame(animateEllipse);  }  // 启动动画  animateEllipse();  
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/819319.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[Java EE] 计算机工作原理与操作系统简明概要

[Java EE] 计算机工作原理与操作系统简明概要

1. 计算机工作原理 1.1 生活中常见的计算机 计算机分为通用计算机和专用计算机,计算机并不单单指的是电脑,还有我们平时使用的手机,ipad,智能手表等终端设备都是计算机.还有我们用户不常见的计算机,比如服务器. 还有许多嵌入式设备(针对特定场景定制的"专用计算机"…
阅读更多...
Suno,属于音乐的ChatGPT时刻来临

Suno,属于音乐的ChatGPT时刻来临

AI绘画 AI视频我们见过了&#xff0c;现如今AI都能生成一首音乐&#xff0c;包括编曲&#xff0c;演唱&#xff0c;而且仅需几秒的时间便可创作出两分钟的完整歌曲 相信关注苏音的很大一部分都是从获取编曲或者混音插件来的&#xff0c;现如今AI却能帮你几秒生成曲子 今天就带…
阅读更多...
海外云手机怎么解决tiktok运营难题？

海外云手机怎么解决tiktok运营难题？

最近打算做TikTok的商家越来越多了&#xff0c;而做TikTok的第一步就面临如何养号、涨粉的困境&#xff0c;本文将介绍如何通过海外云手机轻松解决这些问题。 早期大家用的比较多的&#xff0c;是真机科学上网的方法。但是这种方法&#xff0c;需要自己搭建海外环境&#xff0c…
阅读更多...
网络篇09 | 运输层 udp

网络篇09 | 运输层 udp

网络篇09 | 运输层 udp 01 简介UDP 是面向报文的 02 报文协议 01 简介 UDP 只在 IP 的数据报服务之上增加了一些功能&#xff1a;复用和分用、差错检测 UDP 的主要特点&#xff1a;无连接。发送数据之前不需要建立连接。 使用尽最大努力交付。即不保证可靠交付。 面向报文。…
阅读更多...
DRF视图组件(2个视图基类、5个视图扩展类、9个视图子类、视图集和路由映射)

DRF视图组件(2个视图基类、5个视图扩展类、9个视图子类、视图集和路由映射)

DRF视图组件(2个视图基类、5个视图扩展类、9个视图子类、视图集和路由映射) 目录 DRF视图组件(2个视图基类、5个视图扩展类、9个视图子类、视图集和路由映射)2个视图基类mixins的5个视图扩展类generics的9个视图子类视图集自定制返回格式自动生成路由(SimpleRouter)action装饰器…
阅读更多...
[lesson30]操作符重载的概念

[lesson30]操作符重载的概念

操作符重载的概念 操作符重载 C中的重载能够扩展操作符的功能 操作符的重载以函数的方式进行 本质&#xff1a; 用特殊形式的函数扩展操作符的功能 通过operator关键字可以定义特殊的函数 operator的本质是通过函数重载操作符 语法&#xff1a; 可以将操作符重载函数定…
阅读更多...
Android RecyclerView性能优化及Glide流畅加载图片丢帧率低的一种8宫格实现，Kotlin

Android RecyclerView性能优化及Glide流畅加载图片丢帧率低的一种8宫格实现，Kotlin

Android RecyclerView性能优化及Glide流畅加载图片丢帧率低的一种8宫格实现&#xff0c;Kotlin <uses-permission android:name"android.permission.READ_EXTERNAL_STORAGE" /><uses-permission android:name"android.permission.READ_MEDIA_IMAGES&qu…
阅读更多...
c# 服务创建

c# 服务创建

服务 创建服务 编写服务 可以对server1.cs重新命名&#xff0c;点击你的server按F7进入代码编辑模式&#xff0c;编写脚本 双击你的server.cs右击空白位置&#xff0c;添加安装程序&#xff0c;此时会生成“serviceInstaller1”及“serviceProcessInstaller1” 后续可以点击P…
阅读更多...
faker 伪造数据生成库

faker 伪造数据生成库

faker 伪造数据生成库 前言 javafaker&#xff0c;这是一个用于生成假数据的 Java 库&#xff0c;与 Python 的 faker 库类似。javafaker 库提供了很多方法&#xff0c;用于生成各种类型的随机数据&#xff0c; 基本用法 api介绍 <!--java faker用于生成随机数据-->&…
阅读更多...
使用AI动作捕捉制作动画图像——Viggle AI教程

使用AI动作捕捉制作动画图像——Viggle AI教程

使用AI动作捕捉制作动画图像——Viggle AI教程 在数字媒体时代&#xff0c;动画制作已经成为一种流行的艺术形式。最近&#xff0c;我在网上发现了一个非常有趣的AI动画制作工具——Viggle AI。这个工具不仅简单易用&#xff0c;而且目前还是免费的。在这篇博客中&#xff0c;我…
阅读更多...
护眼台灯哪个牌子最好，护眼台灯品牌排行榜分享

护眼台灯哪个牌子最好，护眼台灯品牌排行榜分享

​护眼台灯哪个牌子最好&#xff1f;尽管一些家长可能对护眼台灯还不甚了解&#xff0c;下面我将介绍这类台灯的几个显著优势&#xff1a;它们专为减少眼睛疲劳和保护视力而设计&#xff0c;提供稳定且柔和的光线&#xff1b;具备灵活的亮度调节功能&#xff0c;适应不同的阅读…
阅读更多...
springMVC理解

springMVC理解

springMVC是一种思想&#xff0c;将软件划分为&#xff0c;模型Model&#xff0c;视图View&#xff0c;控制器Controller。 MVC的工作原理&#xff1a;用户通过前端视图页面&#xff0c;发送请求到服务器&#xff0c;在服务器中请求被Controller接收&#xff0c;Controller调用…
阅读更多...
使用PL\SQL将Excel表格导入到oracle数据库中

使用PL\SQL将Excel表格导入到oracle数据库中

因为要测试生产问题&#xff0c;需要把生产上oracle导出数据导入到测试环境oracle数据库中&#xff0c;尝试了N种方法&#xff0c;发现使用PL\SQL 的ODBC 方法比较好用 1、开始 首先使用plsqldev里面的&#xff0c;工具--》下面的odbc导入器 2、配置 点击之后&#xff0c;会…
阅读更多...
OpenHarmony轻量系统开发【2】源码下载和开发环境

OpenHarmony轻量系统开发【2】源码下载和开发环境

2.1源码下载 关于源码下载的&#xff0c;读者可以直接查看官网&#xff1a; https://gitee.com/openharmony/docs/tree/master/zh-cn/release-notes 本文这里做下总结&#xff1a; &#xff08;1&#xff09;注册码云gitee账号。 &#xff08;2&#xff09;注册码云SSH公钥…
阅读更多...
weblogic oracle数据源配置

weblogic oracle数据源配置

在weblogic console中配置jdbc oracle数据源 1. base_domain->Service->DataSources 在Summary of JDBC Data Sources中&#xff0c;点击New, 选择【Generic Data Source】通用数据源。 2. 设置数据源Name和JNDI name 注&#xff1a;设置的JNDI Name是Java AP中连接…
阅读更多...
用于 SQLite 的异步 I/O 模块（二十四）

用于 SQLite 的异步 I/O 模块（二十四）

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLite的PRAGMA 声明&#xff08;二十三&#xff09; 下一篇&#xff1a;SQLite、MySQL 和 PostgreSQL 数据库速度比较&#xff08;本文阐述时间很早比较&#xff0c;不具有最新参考性&#xff09;&#xff08;二…
阅读更多...
C#医学实验室/检验信息管理系统（LIS系统）源码

C#医学实验室/检验信息管理系统（LIS系统）源码

目录 检验系统的总体目标 LIS主要包括以下功能&#xff1a; LIS是集&#xff1a;申请、采样、核收、计费、检验、审核、发布、质控、耗材控制等检验科工作为一体的信息管理系统。LIS系统不仅是自动接收检验数据&#xff0c;打印检验报告&#xff0c;系统保存检验信息的工具&a…
阅读更多...
使用Hugo、Github Pages搭建自己的博客

使用Hugo、Github Pages搭建自己的博客

文章目录 搭建博客框架及对比使用Hugo搭建博客使用Github Pages部署博客 搭建博客框架及对比 在众多的博客框架中&#xff0c;Hugo、Jekyll和Hexo因其出色的性能和易用性而备受推崇。 特点HugoJekyllHexo速度极高中等较高易用性高中等高&#xff08;熟悉JavaScript者&#xf…
阅读更多...
书生·浦语大模型全链路开源体系-第5课

书生·浦语大模型全链路开源体系-第5课

书生浦语大模型全链路开源体系-第5课 书生浦语大模型全链路开源体系-第5课相关资源LMDeploy基础配置LMDeploy运行环境下载internlm2-chat-1_8b模型使用Transformer来直接运行InternLM2-Chat-1.8B模型使用LMDeploy以命令行方式与InternLM2-Chat-1.8B模型对话设置KV Cache最大占用…
阅读更多...
数据结构--栈，队列，串，广义表

数据结构--栈，队列，串，广义表

3.栈 &#xff08;先进后出&#xff09; 栈是一种特殊的线性表&#xff0c;只能从一端插入或删除操作。 4.队列 4.1 4.1.1初始化 4.1.2判断队列是否为空 4.1.3判断队列是否为满 4.1.4入队 4.1.5出队 4.1.6打印队列 4.1.7销毁队列 5.串 5.1 串的定义 由零个或者任意多…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023