单击时更改svg元素的属性填充
单击时更改SVG元素的属性填充，可以通过JavaScript来实现。具体步骤如下：
- 首先，需要在HTML文件中引入一个SVG元素，可以使用
<svg>标签来创建SVG图形。 - 在SVG元素中添加需要更改填充属性的元素，可以使用
<rect>、<circle>、<path>等标签来创建不同的形状。 - 给需要更改填充属性的元素添加一个唯一的ID，可以使用
id属性来设置。 - 在JavaScript中，使用
document.getElementById()方法获取需要更改填充属性的元素。 - 使用
addEventListener()方法为元素添加一个点击事件监听器。 - 在点击事件的回调函数中，使用
setAttribute()方法来更改元素的填充属性。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Change SVG Fill on Click</title>
</head>
<body>
<svg width="200" height="200">
<rect id="myRect" x="50" y="50" width="100" height="100" fill="blue"></rect>
</svg>
<script>
var rect = document.getElementById("myRect");
rect.addEventListener("click", function() {
rect.setAttribute("fill", "red");
});
</script>
</body>
</html>在上述示例中，当点击矩形元素时，会将其填充颜色从蓝色改变为红色。
对于SVG元素的属性填充的更多操作和应用场景，可以参考腾讯云的SVG相关产品和文档：
请注意，以上链接仅为示例，实际应根据具体情况选择合适的腾讯云产品和文档。
相关·内容
1回答
在做一个小的学习项目时，我偶然发现了一个小问题，那就是在点击时改变SVG元素的颜色。我有一个由某些颜色和SVG元素组成的数组，SVG应该在我每次单击它时更改它的颜色。我试着这样做：<code>C0</code>，有人能指出我的错误吗？
<code>A1</code&g
浏览 21提问于2018-12-17得票数 3
回答已采纳
1回答
我有一个定义了viewbox属性的svg元素，其中高度和宽度都等于100%。svg包含一系列polygon对象。在单击一个多边形时，我希望它展开以填充整个svg (阅读:整个屏幕)。我可以访问svg元素的尺寸并相应地调整polygon的大小，但是由于viewbox属性的缘故，无法绘制宽度。
有没有办法计算viewbox中对应于最
浏览 1提问于2014-05-14得票数 1
单击此链接时，将该anchor tag上的属性发送给click event listener，该click event listener使用这些属性值填充消息的部分内容(消息来自何处，等等)。问题：anchor tag包含一个嵌套的<svg>元素(小图像)。如果用户单击锚文本，没有问题，消息发送属性数据。<a>的Send Me A Mess
浏览 0提问于2021-01-21得票数 1
回答已采纳
1回答
我有一个SVG，需要在页面加载后进行动态修改。一些元素使用fill="currentColor"，另一些元素使用梯度填充，梯度填充在其stop元素中使用stop-color="currentColor"。我的想法是，我应该能够简单地更改父SVG的color属性，并且所有子元素也应该自动更改颜色。
这对于使用fill=&quo
浏览 0提问于2015-11-29得票数 3
回答已采纳
我想从svg文件中更改组中所有元素的填充(onclick)。目前，我使用javascript将属性设置为id。这似乎只改变了其中一个元素。 我尝试过使用onclick内联svg。它似乎不起作用。现在，它只填充一个trianlge，而我将函数设置为从组中调用。 -- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Versi
浏览 58提问于2019-05-15得票数 0
回答已采纳
1回答
我正在尝试更改rect元素的填充颜色。var linearGradient = svg.append("defs") .attr("id", "linear-gradient-"+key);svg.append("rect")
.attr("id","color-filler
浏览 0提问于2019-01-31得票数 3
回答已采纳
1回答
我必须修改一个由艺术家设计的SVG元素。属性“填充”和“笔划”已经被设置，唯一的目的是艺术家在设计时需要看到它。但是，当我加载SVG并尝试更改元素的“填充”和“笔划”时，setAttribute("fill", "rgb("255,0,0"))不会更改颜色 但是，如果我要求美工人员取消设置该元素<
浏览 48提问于2021-03-28得票数 0
1回答
当以编程方式更改父<svg>转换属性时，我得到了一些内部SVG元素的奇怪行为。更改后，css选择器(如:hover)和javascript监听器(onClick)都无法工作。下面是一个示例：
在每个窗口单击之后更新<svg>转换属性的
浏览 3提问于2016-05-09得票数 0
回答已采纳
是否可以像这样在CSS中添加一个之前的元素： li:before { }并访问svg的对象(例如，特定的线条或矩形)和属性(例如，描边宽度、删除线和填充颜色)？或者是否有针对此类情况的变通方法？
用例是在悬停时</e
浏览 2提问于2016-03-24得票数 2
我的设计中有一系列黑色/透明的SVG图标。我需要在悬停时将所有黑色填充和笔触更改为自定义颜色。.icons svg:hover {stroke:#dd6127;更新:正如Anders G所建议的，我
浏览 0提问于2014-04-29得票数 8
回答已采纳
1回答
我正在为一个web应用程序的ui工作。我完成了html5/css3部分，只剩下几个svg元素了。问题是我对应用程序有不同的主题，所以我不确定如何设置这些svg元素的样式，使它们随着主题的变化而变化。我猜一种方法是为每个主题制作不同的.svg文件，但是有没有办法只使用css就给出一个svg元素(它可以包含在html文件中，它不一定是外部文件)，边框，渐变，阴影等等？
浏览 0提问于2011-12-07得票数 4
1回答
我在我的网站中使用svg图标，并希望将它们的颜色更改为红色(它们都是黑色的)。我尝试在img标签上使用css fill属性，但它不起作用。然后我遇到了对象attr，并尝试使用svg图标，如下所示：
<object type="image/svg+xml" data="assets
浏览 1提问于2018-09-28得票数 0
2回答
我用插画制作了一个SVG。元素在路径上有填充。我试图根据路径所在的组id更改颜色。我读到的每一篇文章都说这个应该管用。
浏览 5提问于2015-06-10得票数 0
回答已采纳
我试图在第二次单击时更改SVG上的填充颜色，目前，可以在第一次单击时添加填充颜色，但我希望在第二次单击时将颜色更改/重置为默认颜色；这是我的当前代码： jQuery('
浏览 4提问于2019-09-29得票数 1
回答已采纳
3回答
我所说的点击相当于mouseout的意思是，我希望有一种方式来单击一个元素来更改某个属性，然后当我单击除该元素之外的任何东西时，让它更改。通过悬停切换这个属性更改很容易，因为您可以根据mouseover和mouseout来更改内容，但是我不知道如何根据click事件进行相同的更改。所以我有一个带有圆圈的
浏览 4提问于2014-07-11得票数 3
回答已采纳
您可以修改三部分:云的笔画颜色，云的填充颜色和书写的颜色。live：code: --向SVG的每个部分应用随机颜色的随机按钮。下面是我注意到的困扰我的地方，我还不知道如何解决：
当我单击“”时，SVG的颜色以及<input type="color">元素</
浏览 8提问于2020-05-29得票数 2
回答已采纳
2回答
改变SVG的css不做任何事情
、、、、
所以我有两个“内联”svg，一个用于男性，另一个用于女性。我已经将它们嵌入到HTML including的php文件中。我有两个按钮“男性”和“女性”，每个按钮都可以在点击时显示各自的SVG。默认情况下，可见的SVG是男性的，单击女性按钮时，它会将男性的css属性visibility更改为隐藏，将女性的属性更改
浏览 7提问于2014-09-04得票数 0
1回答
我有一个带有一堆SVG元素的应用程序。当我在SVG元素上悬停时，它们暂时改变颜色，如果我单击其中一个，它就会永久地改变颜色(或者直到再次单击它)。单击SVG元素时，将调用以下代码：$(this).attr("class", styles);
CSS规则用颜色填充
浏览 5提问于2014-06-04得票数 0
回答已采纳
3回答
使用jquery或简单的javascript单击元素时，如何获得元素的属性'id‘。我试过：console.log(this);它记录完整的document对象，因为我使用的是带有选择器的文档，但是单击它时如何获得元素的元素</e
浏览 1提问于2016-07-13得票数 0
回答已采纳
我已经创建了一个Javascript函数来将我的SVG添加到页面中，但是我想要更改形状的颜色，而不必重新绘制形状。通常的document.getElementById方法不起作用，因为形状是在Javascript函数中创建的。
你知道我怎么才能绕过这个吗？谢谢。
浏览 1提问于2014-04-08得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
