如何在连续单击时切换不同的颜色(在SVG对象上)
在SVG对象上实现连续单击切换不同颜色的方法可以通过以下步骤完成：
- 首先，创建一个SVG对象并设置其宽度和高度。可以使用
<svg>标签，并在其中定义一个矩形元素或其他需要改变颜色的图形。 - 添加一个监听事件，以响应鼠标的单击事件。可以使用JavaScript的
addEventListener函数来实现。例如，可以将监听事件绑定到SVG对象的click事件。 - 在单击事件的处理函数中，切换SVG对象的颜色。可以使用JavaScript来修改SVG元素的颜色属性。例如，可以通过修改SVG元素的
fill属性来改变填充颜色。 - 创建一个颜色数组，并设置一个变量用于追踪当前的颜色索引。每次单击事件发生时，通过递增索引来切换颜色。当达到数组的末尾时，将索引重置为0。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>SVG颜色切换</title>
<style>
svg {
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<svg id="mySvg">
<rect width="100%" height="100%" fill="red"></rect>
</svg>
<script>
const svg = document.getElementById('mySvg');
const colors = ['red', 'green', 'blue'];
let colorIndex = 0;
svg.addEventListener('click', function() {
colorIndex = (colorIndex + 1) % colors.length;
svg.querySelector('rect').setAttribute('fill', colors[colorIndex]);
});
</script>
</body>
</html>上述代码将创建一个200x200像素的SVG对象，初始颜色为红色。每次单击事件发生时，将依次切换为绿色、蓝色、再次切换为红色。你可以根据需要修改颜色数组和SVG元素来实现自定义的颜色切换效果。
在腾讯云的产品中，与SVG对象相关的云服务可能是无法直接找到的。然而，腾讯云提供了各种云计算、人工智能、物联网和其他云服务，例如云服务器、云数据库、人工智能API等，这些服务可以在构建云计算应用程序时起到重要作用。你可以在腾讯云的官方网站上查找相关产品信息和文档。
相关·内容
4回答
我正在尝试让组中的所有元素在不同的点击量时更改为特定的颜色。一次单击=红色，两次单击=蓝色，依此类推。它需要切换组中的所有子对象。{"fill": "blue"});},
function(){$("btn1").css({"fill": "green"});
浏览 66提问于2019-05-23得票数 0
回答已采纳
让我在这里问了一个问题：
称其为： .scaleExtent([1, 40])[-100, -100], [width + 90, height + 100]])然后这个：
document.querySelector('svg').addEventListener(
浏览 4提问于2016-07-26得票数 5
回答已采纳
边框属性不适用于SVG文本。我不想使用outline属性，因为它不支持在不同的侧面提供不同的颜色，我也不想使用额外的svg元素，如rect或path，因为这会使我的任务整体上更加复杂。请指导我如何在SVG文本元素上应用边框css。 <style> bo
浏览 0提问于2020-02-03得票数 0
1回答
我有SVG格式的图片，如。
您会推荐什么处理路径？有没有一种简单的方法可以转换com.badlogic.gdx.math.bezier或多边形对象<e
浏览 5提问于2013-03-05得票数 16
回答已采纳
1回答
我有4个SVG有多条路径。我在一个不同的面板中有一个SVG的副本(这个svg是不可点击的)。当我点击可点击的SVG路径时，我会用不同的颜色填充路径。我创建了一个按钮将第一个SVG上的所有路径导入到第二个SVG中。为此，我必须模拟良好路径上的
浏览 2提问于2017-03-19得票数 1
回答已采纳
我在堆栈溢出和其他互联网上对此进行了相当深入的研究。我遇到的问题是使用d3，每次点击鼠标时都有一个圆圈改变颜色。
想法:我已经实现了工作代码，每次点击鼠标时添加一个圆圈，显示该人单击的位置。然而，我希望每个圆圈的颜色，因此每一个点击是不同的。我已经查看了一个切换功能，但这并不改变每个圆圈的颜色创建通过每次点击。以下是目前为止<e
浏览 1提问于2015-04-30得票数 2
回答已采纳
1回答
我有一个角度应用程序，点击SVG元素可以改变它的状态(在附加的片段中，在填充颜色之间切换)是否可能只有在没有d3拖动时才触发ng-单击？在附加的片段中，我<
浏览 2提问于2016-02-25得票数 3
回答已采纳
2回答
好了，亲爱的朋友们，我有这个问题，我真的不知道一个确定的方法来解决它。我用java做了一个“绘画应用程序”，我知道一切都准备好了，但我需要用计算机图形学算法来绘制形状。所以，问题是，一旦形状被绘制在容器中，我如何将其转换为一种“对象”，以便能够选择形状并四处移动(我必须使用另一种算法移动它)。我只想知道，我如何知道在屏幕上单击的某个随机点属于一个对象，知道了这一点，我就能够填充它(使用算法)。我在想，有一个Point类和一个shape
浏览 2提问于2013-05-29得票数 0
2回答
最近，我决定从字体图标切换到SVG图标。我使用Illustrator绘制我的SVG，并用以下设置导出了带有单个图标的美术板：
我使用生成SVG图标但问题是，所有SVG都有一个填充、笔划或样式属性，在任何地方都是内联的。当这些样式在SVG中时，我不能用CSS更新图标颜色
浏览 2提问于2017-09-22得票数 1
我有一个简单的SVG，它包含一个三角形，点击时切换它的填充颜色：const toggleFill = (element) => {svg.addEventListener('click', () => toggleFill(svg
浏览 5提问于2022-09-29得票数 1
回答已采纳
我试图在第二次单击时更改SVG上的填充颜色，目前，可以在第一次单击时添加填充颜色，但我希望在第二次单击时将颜色更改/重置为默认颜色；这是我的当前代码：
jQuery('#color-my-svg').onjQuery(this)[0].hasAttribute(&
浏览 4提问于2019-09-29得票数 1
回答已采纳
本质上，只要有人单击"createTextButton"，"currentTool“就会切换到与该按钮相关联的函数。然后，当有人单击绘图面时，分配给currentTool的函数应该由addEventListener调用，但它不是。
我是不是漏掉了什么？Mozilla文档说，AddEventListener可以接收一个对象或函数作为它的第二个参数。在Node.JS中，我一直使用这样
浏览 2提问于2017-03-01得票数 0
回答已采纳
1回答
这里的目标是使用DOM操作传递一个元素(一个特别被单击的元素)，我希望svg元素以其所有应用的样式显示。到目前为止，svg看起来没有任何样式。我在想，有一种方法可以使用this.getAttribute或this.content传递带有所有样式的单击元素，但这些方法返回时未定义，这就是我当前使用this.innerHtml的原因(这至少可以获得单击的元素将eventListener
浏览 19提问于2020-10-08得票数 0
我正在使用illustrator创建一个SVG文件，该文件将使用图标转换为字体图标。但我对最终结果有问题。我的图标本质上是一组同心圆，在illustrator中保存为SVG。SVG被转换成图标使用的图标，我看到图标被转换成多个路径，而不是单个对象。
浏览 0提问于2015-06-09得票数 8
我希望当我单击WeekView按钮时，它应该会更改条形图的颜色，以反映我的图例中相同的颜色。但出于某种原因颜色是不同的。我不认为 .data(stack);
.append("g") .st
浏览 4提问于2013-11-13得票数 1
回答已采纳
在我的react应用程序中，我想让一个svg按钮(在我的导航栏中)在按钮的路由处于活动状态时更改颜色，或者根据按下/选择的哪个按钮的路径来切换颜色。示例:单击导航栏中的“设置”按钮，路由更改回设置(已经有此工作)，而svg按钮的颜色从蓝色(未选定)更改为蓝色选定(我没有工作)。然后，
浏览 3提问于2021-12-30得票数 -1
2回答
引用这个提琴( )，我如何在#efefef和#3f96cf之间切换被点击图像的边框颜色，以便当图像显示为未选中时为#efefef (也称为“nocheck”类)？我已经在img.check上触发了一个单击事件，那么如何将命令链接在一起以更改不同的元素呢？谢谢
浏览 2提问于2012-04-07得票数 0
回答已采纳
1回答
我有一个有很多视图的应用程序。例如，我有"A"，"B"，“C”.两个"A“、"B”都有一个按钮可以切换到"C“。此外，我可以单击选项卡"C“项，以切换到"C”。问题是，当我在标题栏上切换"C“时，与"B”和"A“不同。
例如，如果我单击A视图的按钮，它将切换到&q
浏览 7提问于2010-09-29得票数 1
2回答
我有两个系列的N个点，我想用两种不同的颜色来表示。在使用MFC CDC和CPen对象以及一堆CDC::MoveTo/CDC::LineTo调用时，我找不到任何明确说明执行此简单任务的最佳方法。似乎每个设备上下文一次只能选择一个笔对象，所以我最好是选择一支笔，画一条线，选择另一支笔，画另一条线……或者浏览一下我的数据，在每个点上以某种方式在笔之间切换(或者
浏览 5提问于2010-08-18得票数 1
回答已采纳
1回答
我正在尝试弄清楚如何使用使我的文本沿着循环路径连续循环。我已经能够让它沿着路径移动，但一旦它到达终点，它就会停止。这里有一个jsfiddle： xmlns=&
浏览 0提问于2016-05-03得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
