突破编程_前端_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>

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

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

相关文章

30元腾讯云服务器搭建幻兽帕鲁Palworld多人联机游戏，畅玩

30元腾讯云服务器搭建幻兽帕鲁Palworld多人联机游戏，畅玩

幻兽帕鲁太火了&#xff0c;官方palworld服务器不稳定&#xff1f;不如自建服务器&#xff0c;基于腾讯云幻兽帕鲁服务器成本32元全自动部署幻兽帕鲁服务器&#xff0c;超简单有手就行&#xff0c;全程自动化一键部署10秒钟即可搞定&#xff0c;无需玩家手动部署幻兽帕鲁游戏程…
阅读更多...
AD7685BRMZRL7 16位 2.3V 低功耗模数转换器芯片 ADI

AD7685BRMZRL7 16位 2.3V 低功耗模数转换器芯片 ADI

AD7685BRMZRL7是一款由ADI&#xff08;亚德诺&#xff09;公司生产的模数转换器&#xff08;ADC&#xff09;芯片。该芯片的主要功能是将模拟信号转换为数字信号&#xff0c;以便在数字系统中处理. AD7685BRMZRL7 规格信息&#xff1a; 制造商:Analog Devices Inc. 产品种类:模…
阅读更多...
CSS特效---百分比加载特效

CSS特效---百分比加载特效

1、演示 2、一切尽在代码中 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title&…
阅读更多...
CentOS下部署ftp服务

CentOS下部署ftp服务

要在linux部署ftp服务首先需要安装vsftpd服务 yum install vsftpd -y 安装完成后需要启动vsftpd服务 systemctl start vsftpd 为了能够访问ftp的端口&#xff0c;需要在防火墙中开启ftp的端口21&#xff0c;否则在使用ftp连接的时候会报错No route to host. 执行如下命令为f…
阅读更多...
WebGL 2.0相较于1.0有什么不同？

WebGL 2.0相较于1.0有什么不同？

作者&#xff1a;STANCH 1.概述 WebGL 1.0自推出以来&#xff0c;已成为广泛支持的Web标准&#xff0c;既能跨平台&#xff0c;还免版税。它通过插件为Web浏览器带来高质量的3D图形&#xff0c;这是迄今为止市场上使用最广泛的Web图形&#xff0c;并得到Apple&#xff0c;Goog…
阅读更多...
Leetcode第28题：实现 strStr()【python】

Leetcode第28题：实现 strStr()【python】

作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任大厂数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python 欢迎加入社区&#xff1a;码上找工作 作者专栏每日更新&#xff1a;LeetCode解锁1000题: 打怪升级之旅python数据分析可…
阅读更多...
C#生成一个绿色文件

C#生成一个绿色文件

生成一个绿色文件免去了安装的繁琐过程&#xff0c;直接运行&#xff0c;非常方便。 新建一个类库项目 在类库Class1中实现简单的Sum方法。 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespac…
阅读更多...
【Hello算法】 ＞ 第 2 关 ＞数据结构 之 数组与链表

【Hello算法】 ＞ 第 2 关 ＞数据结构 之 数组与链表

数据结构 之 数组与链表 1&#xff1a;Understanding data structures &#xff01;——了解数据结构——1.1&#xff1a;Classification-分类-1.2&#xff1a;Type-类型- 2&#xff1a;Arrays are the bricks that make up the wall of data structures *——数组是组成数据结…
阅读更多...
二、Maven安装

二、Maven安装

Maven安装 一、Centos7.9安装1.下载2.安装3.设置国内镜像4.设置maven安装路径 一、Centos7.9安装 1.下载 第一种&#xff1a;官网下载最新版本&#xff1a;http://maven.apache.org/download.cgi第二种&#xff1a;其他版本下载&#xff1a;https://archive.apache.org/dist/…
阅读更多...
Ubuntu20.04安装和编译运行lidar_align来联合标定lidar与imu的外参

Ubuntu20.04安装和编译运行lidar_align来联合标定lidar与imu的外参

硬件&#xff1a;树霉派4b、天眸lidar(32线)、IMU(GNSS不接天线) 系统&#xff1a;ubuntu20.04、 天眸lidar(32线)&#xff1a; IMU(GNSS不接天线)&#xff1a; 1、下载并安装lidar_align mkdir -p lidar_align/src cd lidar_align/src git clone https://github.com/ethz-…
阅读更多...
RK3568平台 SPI设备驱动

RK3568平台 SPI设备驱动

一.SPI简介 SPI是许多不同设备使用的常见通信协议。例如&#xff0c;SD卡模块、RFID读卡器模块和2.4GHz无线发射机/接收器均使用SPI与微控制器进行通信。 SPI是串行外设接口&#xff08;Serial Peripheral Interface)的缩写&#xff0c;是一种高速的&#xff0c;全双工&#x…
阅读更多...
Elastic 线下 Meetup 将于 2024 年 4 月 27 号在重庆举办

Elastic 线下 Meetup 将于 2024 年 4 月 27 号在重庆举办

2024 Elastic Meetup 重庆站活动&#xff0c;由 Elastic、新智锦绣联合举办&#xff0c;现诚邀广大技术爱好者及开发者参加。 活动时间 2024年4月27日 13:30-18:00 活动地点 中国重庆 沙坪坝区学城大道62-1号研发楼一期b3栋1楼(瑞幸咖啡旁&#xff09; 活动流程 14:00-14:50…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023