svg 图标只有点击 图标的边才会触发点击事件

最新推荐文章于 2024-05-24 17:41:20 发布
最新推荐文章于 2024-05-24 17:41:20 发布
阅读量1.5k 收藏 2
点赞数 2
分类专栏： 前端 文章标签： svg 事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40247562/article/details/119669220
版权

近来开发时发现，svg 图标添加点击事件只有在点击 图标的边时才有效。

经过查阅，解决办法有两个 ，在此记录一下

1. 设置css 

svg{

        pointer-events: none;

}

2. 在svg 图标 外层套一层 ，给外层添加点击事件 

 

进了吧
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SVG实现点击元素弹窗展示对应信息
Shiny_boy_的博客
12-29 749
data-placement的作用是设定提示框显示的方向 : top, bottom, left 或 right。一般事件会作用到一个标签对象，如果是其他标签对象，就需要使用data-target指事件的标签目标。
vue项目 使用svg渲染地图 并添加点击事件，下拉框选中区域，动态改变地上对应区域的背景颜色（按百分比渲染背景颜色）
蓝胖子的博客
06-30 3374
vue项目 使用svg渲染地图 并添加点击事件，下拉框选中区域，动态改变地上对应区域的背景颜色（按百分比渲染背景颜色）
vue3中图片上叠svg的polygon&svg元素选中事件和效果
最新发布
weixin_44058103的博客
05-24 435
vue3中 图片叠svg的不规则polygon和元素选中效果
svg 点击 事件_使用 SVG 实现圆环日期选择器
weixin_39772388的博客
12-10 508
编者按：本文作者奇舞团前端开发工程师李喆明。前言这篇文章是多年前在 SegmentFault(https://segmentfault.com/q/1010000002424191/a-1020000002432581) 上的一个回答，原问题是问如何使用 Canvas 实现一个下图类似的圆环选择器，点击后会出现对应的日期。虽然已经有 Canvas 的答案了，不过当时正好在学习 SVG 就...
Vue 中 SVG 动态渲染 包括（绑定事件，修改元素，SVG缩放） 支持PC 移动端
C_jian_的博客
03-05 4372
Vue 中 SVG 动态渲染 包括（绑定事件，修改元素，SVG缩放） 支持PC 移动
html5 svg 中元素点击事件添加方法
12-13
最近在用svg的点击事件做东西，之所以用svg而不用canvas就是因为svg内的元素可以添加点击事件，他们之间详细的区别如下： Canvas 与 SVG 的比较（详见） 下表列出了 canvas 与 SVG 之间的一些不同之处。 Canvas •依赖分辨率 •不支持事件处理器 •弱的文本渲染能力 •能够以 .png 或 .jpg 格式保存结果图像 •最适合图像密集型的游戏，其中的许多对象会被频繁重绘 SVG •不依赖分辨率 •支持事件处理器 •最适合带有大型渲染区域的应用程序（比如谷歌地图） •复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） •不适合游戏应用 做出的网页在
点击动态选项卡图标栏SVG特效
07-24
当用户点击选项卡时，JavaScript会捕获点击事件，然后执行相应的逻辑，比如改变选中状态、触发SVG动画等。JavaScript库如jQuery或Vanilla JS可以帮助简化DOM操作，使得代码更加简洁高效。在这个特效中，可能使用了...
bootstrap布局中input输入框右侧图标点击功能
09-02
然而，Bootstrap默认情况下，并不直接支持这些图标触发点击事件。这是因为图标通常作为字体图标（如glyphicon）或者SVG图标，它们本质上是文本或图像，无法直接绑定JavaScript事件。 为了解决这个问题，我们可以...
HTML5 SVG图标按钮菜单特效
07-24
3. **JavaScript事件监听**：通过JavaScript监听用户的点击事件，当用户点击主按钮时触发展开或收起菜单的动画。TweenMax库提供了便捷的方法来控制SVG元素的属性变化，例如改变`transform`（变换）属性实现平滑的...
html5 svg点击购物车图标动态效果特效代码
03-20
在本案例中，点击购物车图标会触发一个动态效果，这通常涉及到JavaScript和CSS的使用。JavaScript可以监听用户的点击事件，当用户点击图标时执行特定的函数，例如显示或隐藏购物车内容，或者播放动画。CSS则用于定义...
HTML5 SVG天气图标动画特效
07-24
4. 绑定JavaScript事件：如果需要用户交互，可以通过JavaScript监听事件（如click），并在事件触发时启动或改变动画。 这个特效集的实现还可能涉及其他技术，如响应式设计，以确保图标在不同设备上都能正确显示；...
利用svg显示不规则图形，实现用户点击交互
qq_60178319的博客
08-18 839
例如：项目场景：有下方有三块区域是办公区域，需要鼠标点击后出来对应区域信息。
svg 上面添加 点击事件 怎么找不到_点亮图片SVG交互 技术文日记 别以后不会了...
weixin_39651735的博客
12-09 405
自我研究成果 适合小白公众号作者们，更新答案上手把手教程- -。网页链接​mp.weixin.qq.com秀米折腾大半天 各种方式研究啊 不是技术流真挺不容易 ，这链接是我做的 可以看效果。公众号新手，最好大家能给面儿关注一下 ：e新说。首先你用美图啊snapseed啊之类的app把你想用的彩图做个黑白图出来。然后here we go！1 打开秀米新建图文2 图文模版-选布局-svg互动3 使劲下...
a标签内插入svg图片后只能点击边缘触发事件
m0_63778112的博客
08-30 1182
a标签内插入svg图片后只能点击边缘触发事件
svg鼠标响应事件的四种方法
lne818的专栏
07-25 2143
Mouse Events - SMIL    "" target="_blank">http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">http://www.w3.org/2000/svg"     xmlns:xlink="" target="_blank">http://www.w3.org/1999/xlink">     
svg 点击 事件_原生JS + SVG 小游戏
weixin_39672979的博客
12-10 1141
游戏在线地址https://oreillymedia.github.io/Using_SVG/ch18-interaction-files/circle-click-game.svg基本的HTML文件结构<html> <body> <svg id="gameboard" /> <div> 剩余时间: <span...
如何通过插件screenFull实现全屏效果？
i-cat的博客
02-15 1757
浏览器中自带全屏功能document.documentElement.webkitRequestFullScreen()，不过有兼容性问题，所以需要用插件screenFull
C#WinForm程序调用SVG，并动态在SVG图上绑值
newbie的博客
03-16 1335
要调整大小的SVG文档/// SVG图像的全路径。/// 位图图像的路径.返回一个大小或根据该文件的原始文件。/// 返回转换位图图像。/// 返回SVG文档
react实现盒子里边内容过长 添加一个图标点击展开出现纵向滚动条
05-25
实现这个功能，可以通过以下步骤： 1. 在盒子中添加一个图标，用来触发展开/收起操作； 2. 设置盒子的高度和 overflow 属性，使其固定高度并出现纵向滚动条； 3. 通过 CSS 动画控制盒子的展开/收起。 具体实现代码如下： ```jsx import React, { useState } from "react"; function Box() { const [isExpanded, setIsExpanded] = useState(false); const handleToggle = () => { setIsExpanded(!isExpanded); }; return ( <div style={{ height: isExpanded ? "auto" : "100px", overflowY: "auto", border: "1px solid #ccc", padding: "10px", position: "relative" }} > {isExpanded ? ( <> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit, sapien non bibendum placerat, orci elit placerat nisi, vel ultrices massa ex in velit. Nam elit ligula, sodales eget malesuada quis, dapibus et purus. </p> <p> Suspendisse sed finibus urna. Aenean sollicitudin, mi et condimentum ornare, arcu risus tristique nunc, non egestas nisl massa vitae risus. Sed tincidunt lorem vel purus lobortis, vitae pharetra quam consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc at justo ullamcorper, tincidunt velit vel, consequat nulla. Morbi non tincidunt lacus. Aenean nec lectus vel arcu semper tincidunt sit amet a nunc. Donec posuere magna ac dui maximus consequat. Nulla sed risus euismod, commodo ante ac, bibendum arcu. </p> </> ) : null} <div style={{ position: "absolute", bottom: "10px", right: "10px" }} onClick={handleToggle} > {isExpanded ? ( <svg width="24" height="24" viewBox="0 0 24 24"> <path d="M19 13H5v-2h14v2z" /> </svg> ) : ( <svg width="24" height="24" viewBox="0 0 24 24"> <path d="M7 10l5 5 5-5z" /> </svg> )} </div> </div> ); } export default Box; ``` 在这个例子中，我们通过 useState hook 来控制盒子的展开/收起状态，点击图标时触发 handleToggle 函数，通过修改 state 来改变盒子的高度。在盒子的样式中，我们设置了固定高度和 overflow 属性来出现纵向滚动条。最后，我们通过绝对定位把图标放在了盒子的右下角，并通过 CSS 控制其样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值