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

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

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

相关文章

Docker容器嵌入式开发:Docker Ubuntu18.04配置mysql数据库

在 Ubuntu 18.04 操作系统中安装 MySQL 数据库的过程。下面是安装过程的详细描述&#xff1a; 首先&#xff0c;使用以下命令安装 MySQL 服务器&#xff1a; sudo apt install mysql-server系统会提示是否继续安装&#xff0c;按下 Y 键确认。 安装过程中&#xff0c;系统会…

模板进阶 | 非类型模板参数 | 类模板的特化 | 模板的分离编译 | 模板的优缺点

非类型模板参数 我们可以认为非类型模板参数就是一个常量&#xff0c;在我们的类里面我们是不能对它进行改造 为什么会有这样的场景&#xff0c;其次就是C语言那里我们一般使用什么。 场景1 #include<iostream> using namespace std;#define N 10 template<class T…

uniapp开发小程序手写板、签名、签字

可以使用这个插件进行操作 手写板-签名签字-lime-signature - DCloud 插件市场 但是目前这个插件没有vue3 setup Composition API的写法。所以对于此文档提供的可以直接使用,需要使用Composition API方式实现的,可以继续看。 因为Composition API方式,更加的简单、灵活,…

2024 CleanMyMac X 优化储存苹果电脑空间 的好帮手

在数字时代&#xff0c;我们的Mac设备承载着越来越多的重要信息和日常任务。然而&#xff0c;随着时间的推移&#xff0c;这些设备可能会变得缓慢、混乱&#xff0c;甚至充满不必要的文件。这就是CleanMyMac X发挥作用的地方。 CleanMyMac X是一款功能强大的Mac优化工具&#…

基于java+springboot+vue实现的药品管理系统(文末源码+Lw)23-297

摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;药品信息因为其管理内容繁杂&#xff0c;管理数量繁多导致手工进行处理不能满足广…

动态规划原理及其在优化问题中的应用解析

动态规划原理及其在优化问题中的应用解析 一、最优子结构二、重叠子问题三、何时使用动态规划法四、伪代码示例五、C代码示例七、详细说明动态规划原理7.1、最优子结构7.2 重叠子问题7.3 动态规划的实现 八、结论 动态规划是一种解决优化问题的方法&#xff0c;它通过将原问题分…

Triton Server Python 后端优化

接上文 不使用 Docker 构建 Triton 服务器并在 Google Colab 平台上部署 HuggingFace 模型 MultiGPU && Multi Instance Config 追加 instance_group [{count: 4kind: KIND_GPUgpus: [ 0, 1 ]} ]Python Backend Triton 会根据配置信息启动四个实例&#xff0c;…

win10系统中exe文件打不开

问题描述 昨天下载了某个驱动安装程序之后&#xff0c;点击.exe文件没有反应。 解决方法 1. 开启兼容模式运行 右键点击属性 点击【兼容性】&#xff0c;并且【以兼容模式运行程序】 2. 给exe文件换个文件夹再次尝试 我使用第一个方法没有用&#xff0c;之后尝试了把文…

Eureka-搭建Eureka步骤

简介&#xff1a; Eureka是Netflix开发的服务发现框架&#xff0c;本身是一个基于REST的服务&#xff0c;主要用于定位运行在AWS域中的中间层服务&#xff0c;以达到负载均衡和中间层服务故障转移的目的。SpringCloud将它集成在其子项目spring-cloud-netflix中&#xff0c;以实…

转让北京100万旅行社带国内旅行社许可证条件和要求

旅行社的主要分类为国际旅行社和国内旅行社两类。国际旅行社拥有更为广泛的经营范围&#xff0c;不仅涵盖国内旅游业务&#xff0c;还包括出境旅游业务以及入境旅游业务&#xff1b;相比之下&#xff0c;国内旅行社则专注于国内旅游市场以及入境旅游业务。当前情况下&#xff0…

Pandas部分应掌握的重要知识点

目录 Pandas部分应掌握的重要知识点一、DataFrame数据框的创建1、直接基于二维数据创建&#xff08;同时使用index和columns参数&#xff09;2、基于excel文件中的数据来创建 二、查看数据框中的数据和联机帮助信息1、查看特殊行的数据2、查看联机帮助的两种常见方法&#xff0…

MDK平台 - Code, RO-data , RW-data, ZI-data详解

文章目录 1 . 前言2 . Code, RO-data , RW-data, ZI-data解析3 . RAM上电复位4 . 细节扩展5 . 总结 【全文大纲】 : https://blog.csdn.net/Engineer_LU/article/details/135149485 1 . 前言 MDK编译后&#xff0c;会列出Code, RO-data , RW-data, ZI-data&#xff0c;以下解析…

2024年会计、审计、财务与经济管理国际会议(ICAAFEM2024)

2024年会计、审计、财务与经济管理国际会议&#xff08;ICAAFEM2024&#xff09; 会议简介 2024年国际会计、审计、财务和经济管理会议&#xff08;ICAAFEM2024&#xff09;将在云南省昆明市举行。会议旨在为从事“会计、审计、财务、经济管理”研究的专家学者提供一个平台&am…

java快速幂算法

快速幂算法 参考视频(参考五角七边up大佬&#xff09; 幂运算的介绍 幂运算是指将一个数自身乘以自身多次的运算&#xff0c;其表达式为 a n a^n an&#xff0c;其中 a a a 是底数&#xff0c; n n n 是指数。 快速幂解释 快速幂算法是一种用于快速计算幂运算的算法&…

easyui combobox下拉框组件输入检索全模糊查询

前引&#xff1a; easyui下拉组件&#xff08;combobox&#xff09;&#xff0c;输入检索下拉内容&#xff0c;是默认的右模糊匹配&#xff0c;而且不支持选择。因业务要求需要做成全模糊查询&#xff0c;目前网上搜索有两种方案&#xff1a; 1.修改easyui源码&#xff0c;这个…

Windows联网状态工具TCPView

文章目录 TCPView命令行工具更多Sysinternals Suite工具 TCPView TCPView用于显示系统上所有 TCP 和 UDP 终结点的详细列表&#xff0c;包括本地和远程地址以及 TCP 连接的状态&#xff0c;界面如下。 列表的表头含义如下 表头含义表头含义Process name应用名称Process id进程…

STM32H7各块RAM的位置和作用

STM32H7各块RAM的位置和作用 RAM各块RAM的特性各块RAM的时钟问题RAM分配方案 摘抄于armfly-V7开发板bsp手册&#xff0c;仅供个人学习。 RAM 这个图可以方便识别总线所外挂的外设&#xff0c;共分为三个域&#xff1a;D1 Domain&#xff0c;D2 Domain 和 D3 Domain。 ◆ ITCM 和…

【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 *——数组是组成数据结…

【Java核心能力】美团优选后端一面:Java 八股文相关内容

欢迎关注公众号&#xff08;通过文章导读关注&#xff1a;【11来了】&#xff09;&#xff0c;及时收到 AI 前沿项目工具及新技术的推送&#xff01; 在我后台回复 「资料」 可领取编程高频电子书&#xff01; 在我后台回复「面试」可领取硬核面试笔记&#xff01; 文章导读地址…

基于分布式鲁棒性的多微网电氢混合储能容量优化配置——1

Optimal configuration of multi microgrid electric hydrogen hybrid energy storage capacity based on distributed robustness A B S T R A C T 储能与微电网相结合是解决分布式风能、太阳能资源不确定性、降低其对大电网安全稳定影响的重要技术路径。随着分布式风电和太阳…