首页 > 其他分享 >鼠标移入svg改变svg的边框颜色

鼠标移入svg改变svg的边框颜色

时间:2023-07-11 10:55:04浏览次数:35  
标签:鼠标 svg 边框 stroke 移入 20px

1、将svg以字符串拿过来(注意:要将它自身的stroke去掉)

const usedIconSvg = `<svg width="20.041748" height="20.041664" viewBox="0 0 20.0417 20.0417" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<desc>
			Created with Pixso.
	</desc>
	<defs>
		<clipPath id="clip148_1857">
			<rect id="keyline" width="20.041666" height="20.041666" fill="white"/>
		</clipPath>
	</defs>
	<g clip-path="url(#clip148_1857)">
		<path id="椭圆 4" d="M10 2.99997C13.866 2.99997 17 6.13397 17 9.99997C17 13.866 13.866 17 10 17C6.13403 17 3 13.866 3 9.99997C3 6.13397 6.13403 2.99997 10 2.99997Z" />
		<mask id="mask148_1867" mask-type="alpha" maskUnits="userSpaceOnUse" x="7.671875" y="3.000031" width="9.327881" height="9.139648">
			<path id="椭圆 4" d="M8.24976 9.12498C8.24976 5.25899 6.13379 3.00003 9.99976 3.00003C13.8657 3.00003 16.9998 6.13403 16.9998 10C16.9998 13.866 13.8657 11.3125 9.99976 11.3125C6.13379 11.3125 8.24976 12.991 8.24976 9.12498Z" fill-rule="evenodd" fill="#3471FF"/>
		</mask>
		<g mask="url(#mask148_1867)">
			<path id="矩形 636" d="M13.9377 2.56235L16.1252 5.62485L10.0002 10.4373L10.0002 2.12485L13.9377 2.56235Z"  />
		</g>
	</g>
</svg>

`;

 2、span用v-html渲染出来

 <span
                                        class="btn-icon"
                                        v-html="usedIconSvg"
                                    ></span>

  3、鼠标移入改变颜色

          .btn-icon {
                    width: 20px;
                    height: 20px;
                    stroke: #4f5969;
                    &:hover {
                        stroke: #719cff;
                    }
                }

  

 

标签:鼠标,svg,边框,stroke,移入,20px
From: https://www.cnblogs.com/hwy6/p/17543400.html

相关文章

  • UE5 Set Show Mouse Cursor进入游戏显示鼠标
    前言默认情况下进入游戏不点击情况下,鼠标是默认不显示的。为了显示鼠标,可以调用SetShowMouseCursor节点操作默认情况下如果勾选ContextSensitive(情景关联),是无法搜索到相关函数,必须去掉勾选,如下......
  • 将子系统的Ubuntu on Windows添加到鼠标右键启动
    文章转载自博客园helios0210的文章,请转到原文链接:为WSL添加右键启动-helios0210-博客园(cnblogs.com)1,找到WSL的安装路径(可以通过Everything直接搜索ubuntu.exe找到)WSL是在MicrosoftStore上安装的,所以我们去C:\Windows\SystemApps,这个文件夹有权限我们想办法打开然后在.......
  • linux:svg转png(rsvg-convert 2.50.7/ubuntu 21.10)
    一,直接用ImageMagick把svg转为png时有瑕疵1,例子:原图:转换命令:liuhongdi@lhdpc:/data/work/tmpimg$convertgo-logo-blue.svggo.png效果如下:转换完后图片不完整2,查看convert是否调用rsvg-convert确实调用了,但不确定为什么会出现此情况liuhongdi@lhdpc:/data/w......
  • mac 鼠标双击不能用
    我自己一直喜欢用鼠标快速跟踪(速度最高)和按键速度最高。在使用Mac电脑过程中,一些用户遇到了双击鼠标或触控板打不开文件和文件夹的情况,这可能与鼠标的连按速度有关系。这有可能是跟你的按键速度有关,不能调到最大值,所以遇到这种双击不好使的情况下,可以尝试把按键速度降低一点......
  • 傻逼向日葵与鼠标/触控板与设备注册表
    事情是这样的,在咸鱼上挂了VScode帮别人配置C环境,因为远程,所以使用了向日葵然后我的鼠标链接关闭触控板功能就失效了。开启这个功能,即使拔掉了鼠标,依然无法使用触控板。堪称人类迷惑行为。好在最后呢,也是根据网友的帮助,找到了设备管理,发现有4个鼠标一模一样。禁用第一个后就恢复......
  • el-table单元格内容较多时隐藏,鼠标hover时显示并且显示的内容可以换行
    说明在使用element的table表格的时候,发现单元格内容较多的情况下在el-table-column上面使用了show-overflow-tooltip属性:当内容过长被隐藏时显示tooltip但是他是一整行展示,不太好看所以我想弄成可以换行的解决1.在<style></style>标签中添加样式注:必须写在全局样式中......
  • 解除网页屏蔽鼠标右键方法
    这是一段JS代码,本人一直在用的,感觉还不错;百度搜索有很多都是无效或者是错误无法使用的;最近几天在公司在用,没百度出正确的代码,就决定分享出这个代码;完整代码如下:javascript:(function(){functionR(a){ona="on"+a;if(window.addEventListener)window.addEventListener(a......
  • AE脚本丨自适应底栏边框文字标题动画 Box It v1.0&使用教程
    这个AE脚本BoxIt主要是用于快速创建复杂的动态文本框,非常适合下第三标题、标签、聊天气泡、多个文本框等。 去下载它的主要特点有:1.简单易用,无需键入任何代码,通过简单的拖放和调整参数即可创建动态文本框2.包含多种预设选项,如简单、标准、粗体、标签、聊天气泡等......
  • 3DMAX中鼠标右键不显示Railclone选择控制线的操作命令
     3DMAX中鼠标右键不显示Railclone选择控制线的操作命令,具体显示如下:修复前:  修复方法:RC-2023右键丢失请尝试将此文件:C:ProgramData\Autodesk\ApplicationPlugins\RailClonePro2023\Content\scripts\startup'\railclone_utils.ms复制到3DSMax安装中的“脚本文件夹(通常......
  • 解决方案 | win10任务栏假死,桌面鼠标可以动但是无法点击任务栏图标
    1背景今天电脑不知道什么原因,鼠标出现了无法点击任务栏图标的情况,但是桌面上可以晃动。 2解决过程(方法1-3对我无效,但是不代表对你们无效,)方法1:重启资源管理器。方法2:电脑重启、或者关机重启。方法3:win+i,设置-电源和睡眠--从不 除此之外,我还进行了系统还原、文件转移(......