突破编程_前端_SVG(ellipse 椭圆形)

2024-04-15 18:12

本文主要是介绍突破编程_前端_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>

这篇关于突破编程_前端_SVG(ellipse 椭圆形)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/906548

相关文章

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE

C#反射编程之GetConstructor()方法解读

《C#反射编程之GetConstructor()方法解读》C#中Type类的GetConstructor()方法用于获取指定类型的构造函数,该方法有多个重载版本,可以根据不同的参数获取不同特性的构造函... 目录C# GetConstructor()方法有4个重载以GetConstructor(Type[]

python解析HTML并提取span标签中的文本

《python解析HTML并提取span标签中的文本》在网页开发和数据抓取过程中,我们经常需要从HTML页面中提取信息,尤其是span元素中的文本,span标签是一个行内元素,通常用于包装一小段文本或... 目录一、安装相关依赖二、html 页面结构三、使用 BeautifulSoup javascript

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

Linux 网络编程 --- 应用层

一、自定义协议和序列化反序列化 代码: 序列化反序列化实现网络版本计算器 二、HTTP协议 1、谈两个简单的预备知识 https://www.baidu.com/ --- 域名 --- 域名解析 --- IP地址 http的端口号为80端口,https的端口号为443 url为统一资源定位符。CSDNhttps://mp.csdn.net/mp_blog/creation/editor