突破编程_前端_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!");

    // 例如,改变 cx
    this.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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【CicadaPlayer】prepare和start的触发和异步处理

主线程可以直接用SuperMediaPlayer 但SuperMediaPlayer 的处理是异步的。实际上msgproc的目的在于异步处理外部请求 例如,启动后会先设置view,这个与播放流程无关,但是是必须要让播放器拥有的。用户点击prepare是直接调用SuperMediaPlayer的Prepare接口,才会触发url的设置 …

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

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 串的定义 由零个或者任意多…

最新AI创作系统ChatGPT网站源码AI绘画,GPTs,AI换脸支持,GPT联网提问、DALL-E3文生图

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧。已支持GPT…

VMware安装Linux虚拟机(rocky9)

软件准备&#xff1a; VMware虚拟机ISO系统镜像文件 选择创建虚拟机→典型→下一步→点击稍后安装操作系统 选择Linux系统和对应版本 输入虚拟机名称和选择保存位置 设置磁盘大小 根据需要自定义硬件配置→完成 然后点击编辑虚拟机设置→CD/DVD→选择ISO镜像 然后开启虚拟机→…

vue2 二次封装element 组件,继承组件原属性,事件,插槽 示例

测试页面代码 这里主要记录如何封装element的el-input 并且封装后具有el-input原本的属性 事件 插槽 下面为测试页面即组件调用 <script> import CustomInput from /components/CustomInput.vue;export default {name: TestPage,components: { CustomInput },data() …

【洛谷 P4017】最大食物链计数 题解(深度优先搜索+动态规划+邻接表+记忆化搜索+剪枝)

最大食物链计数 题目背景 你知道食物链吗&#xff1f;Delia 生物考试的时候&#xff0c;数食物链条数的题目全都错了&#xff0c;因为她总是重复数了几条或漏掉了几条。于是她来就来求助你&#xff0c;然而你也不会啊&#xff01;写一个程序来帮帮她吧。 题目描述 给你一个…

【CSS面试题】Flex实现九宫格

考察知识&#xff1a; flex布局 水平垂直居中的实现 初始效果 代码关键&#xff1a;给父盒子添加以下属性 flex-wrap: wrap; /* 允许换行 */justify-content: space-around; /* 主轴对齐方式 */align-content: space-around; /* 多行在侧轴上的对齐方式 */<!DOCTYPE html&…

如何让Nrf connect、EFR connect直接显示特征值数据及其单位

效果如图&#xff1a;app直接显示了我的温度&#xff0c;并且有两位小数&#xff0c;还有温度单位。这是怎么做到的呢&#xff1f; 这次我们仍以TLS8258为例&#xff0c;当然如果是其他蓝牙芯片&#xff0c;配置方式也是大差不差&#xff0c;规则一样的。 #define GATT_CHARA…

租用马来西亚服务器:稳定高效的网络选择

马来西亚首都是吉隆坡。作为一个新兴的多元化经济国家&#xff0c;也属于亚洲四小龙之一。地理位置优越&#xff0c;中间隔着南中国海。一部分是北接泰国的位于马来半岛的西马来西亚&#xff0c;另一部分则是东马来西亚&#xff0c;在婆罗洲岛的北部。这种地理位置有利于促进该…

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

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

系统学c#:1、基础准备(软件下载与安装)

一、Vs软件下载与安装 访问Visual Studio官方网站&#xff1a; https://visualstudio.microsoft.com/zh-hans/downloads 下载Visual Studio 运行exe文件&#xff0c;点击“继续” 初始文件安装完成后选择我们需要安装的项&#xff0c;并勾选好必要的单个组件&#xff0c;设…

cookie与session及其区别

一、cookie 1. 为什么需要cookie&#xff1f; web程序使用HTTP协议进行传输&#xff0c;而HTTP协议是无状态的协议&#xff08;即对事务处理无记忆性&#xff0c;如果后续处理需要使用前面的信息&#xff0c;只能重传&#xff0c;导致每次连接传送的数据量增大&#xff09;。c…

maven3.9+下载安装

maven介绍 Maven 是一个项目管理和理解工具&#xff0c;它基于项目对象模型&#xff08;POM&#xff09;概念。Maven 可以帮助开发者定义项目结构、依赖关系、构建过程以及其他任务。它主要用于 Java 项目&#xff0c;但也可以用于其他类型的项目。Maven 的主要目标是简化构建…

单元测试四大过程

单元测试四大过程&#xff08;蓝桥课学习笔记&#xff09; 单元测试过程 单元测试是软件测试过程中的一个关键环节&#xff0c;它与集成测试、系统测试一样&#xff0c;分为测试策划、测试设计、测试执行和测试总结几个阶段。 单元测试过程中每个阶段需要完成的主要工作如下&…

【Linux】磁盘管理和文件系统

目录 一、硬盘 1.硬盘结构 2.结构类型 二、MBR与磁盘分区 1.MBR主引导记录 2.磁盘分区结构 三、文件系统类型 四、linux系统添加并使用新硬盘的步骤 1.添加新的硬盘 2.刷新识别 3.进行分区 4.格式化&#xff0c;创建文件系统 5.挂载使用 一、硬盘 1.硬盘结构…

Linux程序调试优化(1)——内存占用详解及优化思路

文章目录 1.free查看总体的内存占用2./proc/$PID/status 查看某进程状态 linux开发最重要的两个参数&#xff0c;分别是内存以及CPU使用率&#xff0c;若内存出现严重不足&#xff0c;则在需要使用内存时&#xff0c;可能出现申请不到的情况&#xff0c;导致 OOM&#xff0c;L…

顺丰快递免费的API开放物流信息查询接口

文章目录 目录 文章目录 安装流程 小结 概要安装流程技术细节小结 概要 官方地址&#xff1a;顺丰开放平台 注册成功之后&#xff0c;需要认证&#xff0c;进入当前如图下&#xff0c;认证的入口如图&#xff08;已认证的页面&#xff09; 点击新建应用 安装流程 1. 需要下载…

【模拟】Leetcode 替换所有的问号

题目讲解 1576. 替换所有的问号 算法讲解 这里有两个特殊情况&#xff1a;如果&#xff1f;在第一个位置&#xff0c;只需要判断后面的符号&#xff1b; 如果&#xff1f;在最后一个位置&#xff0c;只需要判断前面的符号 class Solution { public:string modifyString(stri…

Java:定时任务无法正常执行(scheduling + ShedLock)

目录 一、场景二、代码片段三、排查四、原因五、解决 一、场景 1、使用定时任务(scheduling) 分布式锁(ShedLock)定期执行一段代码 2、configureTasks()对于任务执行周期的更新是正常的 3、但任务方法无法被执行 二、代码片段 三、排查 1、确认Trigger没有问题 2、查看red…

如何在MobaXterm上使用rz命令

1、首先输入命令和想下载的文件&#xff0c;如下图&#xff1a; 2、按住ctrl鼠标右键&#xff0c;选择如下选项&#xff1a; 上传命令是rz&#xff0c;选择Receive...... 下载命令是sz&#xff0c;选择Send...... 3、我这里是要把Linux上的文件下载到我的本地window磁盘&…