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

2024-04-13 11:20

本文主要是介绍突破编程_前端_SVG(circle 圆形),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

SVG 的 <circle> 元素用于在SVG文档中绘制圆形。它具有几个基本属性,允许定义圆形的大小、位置、填充颜色和边框样式。以下是 <circle> 元素的基本属性及其详细解释:

1.1 cx 和 cy

  • 描述:这两个属性定义了圆形的中心点。cx 是圆形中心的 x 坐标,cy 是圆形中心的 y 坐标。
  • 示例
<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

在这里插入图片描述

在这个例子中,圆形的中心位于(50, 50)的位置。

1.2 r

  • 描述:r 属性定义了圆形的半径。
  • 示例
<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

在这个例子中,圆形的半径为 40。

1.3 fill

  • 描述:fill 属性定义了圆形的填充颜色。
  • 示例
<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

在这个例子中,圆形的填充颜色为红色。

1.4 stroke

  • 描述:stroke 属性定义了圆形的边框颜色。
  • 示例
<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

在这个例子中,圆形的边框颜色为黑色。

1.5 stroke-width

  • 描述:stroke-width 属性定义了圆形边框的宽度。
  • 示例
<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

在这个例子中,圆形的边框宽度为 3。

1.6 opacity

  • 描述:opacity 属性定义了整个圆形(包括填充和边框)的透明度。值范围从0(完全透明)到1(完全不透明)。
  • 示例
<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" opacity="0.2" />
</svg>

在这里插入图片描述

在这个例子中,整个圆形的透明度设置为0.5,即半透明。

1.7 fill-opacity

  • 描述:这个属性用于设置圆形的填充颜色的透明度。它允许你单独控制填充颜色的不透明度,而不影响边框。
  • 示例
<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" fill-opacity="0.2" />
</svg>

在这里插入图片描述

在这个例子中,圆形的填充颜色(红色)的透明度设置为0.5。

1.8 transform

  • 描述:transform属性允许你对圆形应用各种变换,如旋转、缩放、平移等。这对于创建动画或调整圆形的位置非常有用。
  • 示例
<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" transform="rotate(45)" />
</svg>

在这里插入图片描述

这个例子中,圆形被旋转了 45 度。

2 高级 circle 元素的样式设置

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

(1)内联样式

可以直接在 circle 元素上使用 style 属性来添加内联样式。这种方式适用于单个元素的样式定义,但对于多个元素使用相同的样式时,它可能会导致代码冗余。

示例:

<svg width="100" height="100">  <circle cx="50" cy="50" r="40" style="fill: red; stroke: black; stroke-width: 3;" />  
</svg>

在这个例子中,style 属性直接定义了圆形的填充颜色为红色,边框颜色为黑色,边框宽度为 3。

(2)外部样式表

使用外部 CSS 样式表可以为 SVG 元素提供统一的样式定义,使得样式管理更加集中和方便。

首先,你需要创建一个 CSS 文件,并在其中定义circle 元素的样式。

.my-circle {  fill: red;  stroke: black;  stroke-width: 3;  
}

然后,在 SVG 元素中使用 class 属性来引用这个样式。

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">  <circle cx="50" cy="50" r="40" class="my-circle" />  
</svg>

(3)使用 CSS 选择器

CSS 选择器允许你根据元素的类型、ID、类名或其他属性来选择并应用样式。这对于为 circle 元素添加更复杂的样式规则非常有用。

假设有一组SVG圆形,并且想为具有特定 ID 的圆形应用不同的样式。

CSS文件:

circle {  fill: grey;  stroke: black;  stroke-width: 1;  
}  #special-circle {  fill: purple;  stroke: yellow;  stroke-width: 3;  
}

SVG文件:

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">  <circle cx="50" cy="50" r="40" />  <circle cx="150" cy="50" r="40" id="special-circle" />  
</svg>

在这里插入图片描述

在这个例子中,所有的 元素默认具有灰色填充和黑色边框。但是,具有 ID special-circle 的圆形将具有紫色填充和黄色边框,因为 CSS 规则中针对该 ID 有特定的样式定义。

(4)响应式样式

CSS还可以用来创建响应式SVG圆形,使其在不同屏幕尺寸或视口下具有不同的样式。这通常通过使用媒体查询来实现。

circle {  fill: blue;  stroke: black;  stroke-width: 2;  
}  @media (max-width: 600px) {  circle {  fill: red;  stroke-width: 1;  }  
}

在这个例子中,当视口宽度小于或等于 600px 时,所有的圆形将变为红色填充,并且边框宽度减小到1。

(5)继承与层叠

在 CSS 中,样式可以继承自父元素,并且当多个样式规则应用于同一个元素时,会根据一定的规则(层叠规则)来决定最终的样式。这对于SVG圆形同样适用。

svg {  font-size: 16px; /* 这将影响SVG内部的所有文本元素 */  color: #333; /* 这同样会影响文本颜色,但可能不会被圆形直接继承 */  
}  circle {  fill: currentColor; /* 使用当前文本颜色作为填充色 */  stroke: #000;  
}

在这个例子中,svg 元素的 font-size 和 color 属性会被其所有子元素继承,包括 <circle> 元素。虽然 <circle> 元素本身并不包含文本,但 currentColor 值允许它使用其父元素的文本颜色作为填充色。这样,如果改变了 svg 元素的 color 属性,所有使用 currentColor 的圆形填充色也会相应改变。

2.2 使用渐变填充

使用渐变填充来为 SVG 的 <circle> 元素添加样式是一种强大的视觉表现方式,它能够为图形提供更为丰富和动态的视觉效果。在 SVG 中,你可以使用线性渐变(<linearGradient>)或径向渐变(<radialGradient>)来定义渐变,并将其应用于 <circle> 元素的填充。

线性渐变填充

线性渐变沿着一条直线平滑地过渡颜色。下面是一个使用线性渐变填充 <circle> 的示例:

<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%" stop-color="red" stop-opacity="1" /><stop offset="100%" stop-color="blue" stop-opacity="1" /></linearGradient></defs><circle cx="100" cy="100" r="90" fill="url(#myGradient)" />
</svg>

在这里插入图片描述

在这个例子中:

  • <defs> 元素用于定义渐变,这样它可以在 SVG 的其他地方重复使用。
  • <linearGradient> 定义了线性渐变。id 属性为渐变指定了一个唯一的标识符,以便稍后在 <circle> 元素中引用它。
  • x1, y1, x2, y2 属性定义了渐变的起始和结束位置。在这个例子中,渐变从左侧开始(x1=“0%”)到右侧结束(x2=“100%”),沿着水平方向。
  • <stop> 元素定义了渐变中的颜色停止点。offset 属性指定了颜色在渐变中的位置,stop-color 定义了该位置的颜色,stop-opacity 定义了颜色的不透明度。
  • 在 <circle> 元素中,fill 属性设置为 url(#myGradient),以引用之前定义的渐变。

径向渐变填充

径向渐变从中心点向外辐射颜色。下面是一个使用径向渐变填充 <circle> 的示例:

<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%" stop-color="yellow" stop-opacity="1" /><stop offset="100%" stop-color="green" stop-opacity="1" /></radialGradient></defs><circle cx="100" cy="100" r="90" fill="url(#myRadialGradient)" />
</svg>

在这里插入图片描述

在这个例子中:

  • <radialGradient> 定义了径向渐变。
  • cx 和 cy 属性定义了渐变的中心点,r 属性定义了渐变的半径。
  • fx 和 fy 属性定义了渐变的焦点位置,它决定了颜色辐射的方向。在这个例子中,焦点与中心重合,所以颜色从中心向外均匀辐射。
  • <stop> 元素和它们的属性与线性渐变中的用法相同,用于定义渐变中的颜色和不透明度。
  • 在 <circle> 元素中,同样使用 fill=“url(#myRadialGradient)” 来应用渐变填充。

注意事项

  • 渐变定义通常放在 <defs> 元素内,这样它们就不会在 SVG 的渲染输出中直接显示。
  • 渐变的颜色、位置和不透明度可以通过 <stop> 元素的属性进行精细控制。
  • 渐变可以重复使用,只需在需要应用渐变的地方使用 url() 函数并引用渐变的 id 即可。
  • 渐变也可以与其他 SVG 图形元素结合使用,如 <rect>、<path> 等。

2.3 使用阴影效果

在 SVG 中,为 <circle> 元素添加阴影效果通常涉及到使用 filter 元素来定义一个阴影滤镜,然后将这个滤镜应用到 <circle> 元素上。以下是一个基本的例子,演示如何给 SVG 的 <circle> 元素添加阴影效果:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><defs><filter id="dropShadow"><feDropShadow dx="3" dy="3" stdDeviation="2" flood-color="rgba(0,0,0,0.5)" /></filter></defs><circle cx="100" cy="100" r="50" style="fill:blue; filter:url(#dropShadow);" />
</svg>

在这里插入图片描述

在这个例子中:

  • <defs> 元素用于定义滤镜。
  • <filter> 元素定义了一个滤镜,通过 id 属性给它命名为 “dropShadow”。
  • <feDropShadow> 是 SVG 的阴影滤镜效果,其中:
    • dx 和 dy 属性控制阴影在水平和垂直方向上的偏移量。
    • stdDeviation 属性控制阴影的模糊程度。
    • flood-color 属性设置阴影的颜色,这里使用了半透明的黑色。
  • 在 <circle> 元素中,通过 style 属性的 filter 属性应用先前定义的阴影滤镜。url(#dropShadow) 指向了 <defs> 中定义的滤镜。

注意,<filter> 和 <feDropShadow> 是 SVG 滤镜效果的一部分,它们允许你创建复杂的视觉效果。滤镜在 <defs> 元素中定义后,可以在 SVG 文档的任何地方引用,从而实现效果的重用。

此外,SVG 滤镜还提供了许多其他效果,如模糊(<feGaussianBlur>)、发光(<feFlood>)、颜色矩阵变换(<feColorMatrix>)等,你可以根据需要组合使用这些滤镜来创建丰富的视觉效果。

如果想要更复杂的阴影效果,比如多重阴影或者带有特定颜色、透明度或模糊度的阴影,可以通过调整 <feDropShadow> 元素的属性或者组合多个滤镜效果来实现。

3 使用 JavaScript 操作 circle 元素

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

3.1 示例 1:创建和添加 circle 元素

<!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>// 创建circle元素var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");// 设置circle的属性circle.setAttribute("cx", 100);circle.setAttribute("cy", 100);circle.setAttribute("r", 50);circle.setAttribute("fill", "blue");// 获取SVG元素var svg = document.getElementById("mySvg");// 将circle添加到SVG中svg.appendChild(circle);
</script>
</body>
</html>

3.2 示例 2:改变 circle 的属性

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

3.3 示例3:使用 CSS 样式操作 circle

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

3.4 示例 4:使用 JavaScript 监听和响应事件

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

3.5 示例 5:使用 JavaScript 进行动画

<script>var circle = document.querySelector("#mySvg circle");var startRadius = 50;var endRadius = 100;function animateCircle() {var currentRadius = parseInt(circle.getAttribute("r"), 10);var newRadius = currentRadius + (endRadius - startRadius) / 10; // 假设10步动画if (currentRadius < endRadius) {circle.setAttribute("r", newRadius);requestAnimationFrame(animateCircle); // 递归调用以继续动画}}// 开始动画animateCircle();
</script>

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



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

相关文章

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

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如,在当前目录下创建一个名为 myenv 的虚拟环境: python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行: source myenv/bin/activate 3.与notebook连接 在虚拟环境中,使用 pip 安装 Jupyter 和 ipykernel: pip instal

黑神话,XSKY 星飞全闪单卷性能突破310万

当下,云计算仍然是企业主要的基础架构,随着关键业务的逐步虚拟化和云化,对于块存储的性能要求也日益提高。企业对于低延迟、高稳定性的存储解决方案的需求日益迫切。为了满足这些日益增长的 IO 密集型应用场景,众多云服务提供商正在不断推陈出新,推出具有更低时延和更高 IOPS 性能的云硬盘产品。 8 月 22 日 2024 DTCC 大会上(第十五届中国数据库技术大会),XSKY星辰天合正式公布了基于星

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

【编程底层思考】垃圾收集机制,GC算法,垃圾收集器类型概述

Java的垃圾收集(Garbage Collection,GC)机制是Java语言的一大特色,它负责自动管理内存的回收,释放不再使用的对象所占用的内存。以下是对Java垃圾收集机制的详细介绍: 一、垃圾收集机制概述: 对象存活判断:垃圾收集器定期检查堆内存中的对象,判断哪些对象是“垃圾”,即不再被任何引用链直接或间接引用的对象。内存回收:将判断为垃圾的对象占用的内存进行回收,以便重新使用。