svg代码应用于button

news2024/11/19 5:54:33

将svg代码的path属性应用于按钮内容,去掉按钮边框,并且自适应svg大小,以下实现的是一个旋转按钮。
svg代码如下(iconfont下载):

<svg t="1710741485848" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4468" width="32" height="32"><path d="M938.336973 255.26894c-16.685369-6.020494-35.090879 2.752226-40.939358 19.437594l-24.770032 69.493701c-29.070385-65.537376-74.998152-123.162103-133.48295-166.337645-185.947253-137.611288-450.848984-100.112212-590.180413 83.942886C81.534688 350.908785 52.980346 460.653788 68.805644 570.742819c15.825298 110.605073 74.48211 208.481102 164.789518 275.394591 75.686209 55.904586 164.273476 83.082815 252.172686 83.082815 128.494541 0 255.26894-57.624727 338.007727-166.853687 36.639006-48.335965 61.581052-102.348396 74.48211-160.833193 3.78431-17.373425-7.224593-34.402822-24.426004-38.187133-17.201411-3.78431-34.402822 7.052579-38.187133 24.426004-10.836889 49.36805-31.994625 95.123803-62.957164 135.891147-118.173694 156.016798-342.996136 187.839409-500.90509 70.869814-76.546279-56.592642-126.086343-139.33143-139.503444-232.907106-13.417101-93.059634 10.664875-185.775239 67.77356-261.11742C318.05409 144.491853 542.704519 112.497228 700.785486 229.466823c57.280699 42.315471 100.112212 100.972283 123.334117 167.197715l-110.261045-43.003528c-16.513355-6.364522-35.090879 1.720141-41.627415 18.233496-6.536536 16.513355 1.720141 35.090879 18.233496 41.627415l162.38132 63.473207c3.78431 1.548127 7.740635 2.236183 11.69696 2.236183 0.516042 0 1.032085-0.172014 1.548127-0.172014 1.204099 0.172014 2.408198 0.688056 3.612296 0.688056 13.245087 0 25.630102-8.256677 30.274483-21.32975l57.796741-161.693264C963.623047 279.694944 955.022342 261.289434 938.336973 255.26894z" fill="#575B66" p-id="4469"></path></svg>

xaml如下:

<UserControl.Resources>
	<Style x:Key="NoBorderButton" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
    </Style>
<UserControl.Resources>
<Button Cursor="Hand" Height="20" Width="20" Style="{StaticResource NoBorderButton}">
	<Grid>
		<Viewbox Stretch="Uniform">
			<Path Data="M938.336973 255.26894c-16.685369-6.020494-35.090879 2.752226-40.939358 19.437594l-24.770032 69.493701c-29.070385-65.537376-74.998152-123.162103-133.48295-166.337645-185.947253-137.611288-450.848984-100.112212-590.180413 83.942886C81.534688 350.908785 52.980346 460.653788 68.805644 570.742819c15.825298 110.605073 74.48211 208.481102 164.789518 275.394591 75.686209 55.904586 164.273476 83.082815 252.172686 83.082815 128.494541 0 255.26894-57.624727 338.007727-166.853687 36.639006-48.335965 61.581052-102.348396 74.48211-160.833193 3.78431-17.373425-7.224593-34.402822-24.426004-38.187133-17.201411-3.78431-34.402822 7.052579-38.187133 24.426004-10.836889 49.36805-31.994625 95.123803-62.957164 135.891147-118.173694 156.016798-342.996136 187.839409-500.90509 70.869814-76.546279-56.592642-126.086343-139.33143-139.503444-232.907106-13.417101-93.059634 10.664875-185.775239 67.77356-261.11742C318.05409 144.491853 542.704519 112.497228 700.785486 229.466823c57.280699 42.315471 100.112212 100.972283 123.334117 167.197715l-110.261045-43.003528c-16.513355-6.364522-35.090879 1.720141-41.627415 18.233496-6.536536 16.513355 1.720141 35.090879 18.233496 41.627415l162.38132 63.473207c3.78431 1.548127 7.740635 2.236183 11.69696 2.236183 0.516042 0 1.032085-0.172014 1.548127-0.172014 1.204099 0.172014 2.408198 0.688056 3.612296 0.688056 13.245087 0 25.630102-8.256677 30.274483-21.32975l57.796741-161.693264C963.623047 279.694944 955.022342 261.289434 938.336973 255.26894z" Fill="Black" />
		</Viewbox>
		<TextBlock Background="Transparent" Cursor="Hand"></TextBlock>
	</Grid>
</Button>

TextBlock是为了解决只有点击到路径才能触发点击事件问题。
效果如下:
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

RDP爆破

工具&#xff1a;超级弱口令检查工具 第一步&#xff1a;双击打开工具 第二步&#xff1a;导入账号 第三步&#xff1a;导入密码 第三步&#xff1a;线程 线程默认是50&#xff0c;如果担心影响业务可以修改为5 第四步&#xff1a;填写目标 第五步&#xff1a;选择需要检查的…

Docker知识--01

虚拟化 # 什么是虚拟化 在计算机中&#xff0c;虚拟化&#xff08;英语&#xff1a;Virtualization&#xff09;是一种资源管理技术&#xff0c;是将计算机的各种实体资源&#xff0c;如服务器、网络、内存及存储等&#xff0c;予以抽象、转换后呈现出来&#xff0c;打…

Django HTML模版

一个网站的基本框架&#xff08;如页面布局、导航栏、页脚栏等&#xff09;往往是相同的。可以把这个基本框架做成一个模版&#xff0c;其它正式的HTML页面可以直接套用这个模版&#xff0c;可以大减少各HTML文件的代码量。 语法&#xff08;模版文件中&#xff09;&#xff1…

论文阅读——BLIP

BLIP: Bootstrapping Language-Image Pre-training for Unified Vision-Language Understanding and Generation &#xff08;1&#xff09;单模态编码器&#xff0c;它分别对图像和文本进行编码。图像编码器用ViT&#xff0c;并使用附加的 [CLS] 标记来表示全局图像特征。文本…

【题目】【网络系统管理】2022年甘肃省职业院校技能大赛-网络构建-试卷

极安云科专注职业教育技能竞赛培训4年&#xff0c;包含信息安全管理与评估、网络系统管理、网络搭建等多个赛项及各大CTF模块培训学习服务。本团队基于赛项知识点&#xff0c;提供完整全面的系统性理论教学与技能培训&#xff0c;成立至今持续优化教学资源与讲师结构&#xff0…

s2fft库介绍:可微分和加速球谐变换

一、说明 科学和工程的许多领域都会遇到在球体上定义的数据。对此类数据进行建模和分析通常需要傅里叶变换的球面对应物&#xff0c;即球面谐波变换。我们简要概述了球谐变换&#xff0c;并提出了一种新的可微分算法&#xff0c;该算法专为GPU上的加速而定制[1]。该算法在最近发…

basic_string.h不同版本引起的异常崩溃

程序运行时报错&#xff0c;查看core文件&#xff0c;发现basic_string.h报错 经过排查发现 编译文件CMakeLists中设置了_GLIBCXX_USE_CXX11_ABI 0 _GLIBCXX_USE_CXX11_ABI 是C中的编译宏&#xff0c; 用来控制string及list使用的版本。 该宏仅在GCC5.1及后续版本中有效。 s…

说说JVM的垃圾回收机制

简介 垃圾回收机制英文为Garbage Collection, 所以我们常常称之为GC。那么为什么我们需要垃圾回收机制呢&#xff1f;如果大家有了解过Java虚拟机运行时区域的组成(JVM运行时存在&#xff0c;本地方法栈&#xff0c;虚拟机方法栈&#xff0c;程序计数器&#xff0c;堆&#xf…

第六节:使用SMB开发WebService

一、概述 webservice在日常开发中是常用的接口形式&#xff0c;SMB在设计之初就将webservice作为重要的代理协议。在组件库中提供了webservice input和webservice output两个组件&#xff0c;分别用于发布接口和调用接口。 二、发布webservice 在csdnProject工程中创建名为c…

C语言易错知识点:scanf函数

scanf在C语言学习中比较常用&#xff0c;但因为其涉及屏幕缓冲区导致有的时候会调入陷阱&#xff0c;下面分享一下常见的需要注意的事项&#xff1a; 1.输入末尾带有回车\n 当我们输入数据后&#xff0c;最后按下回车时&#xff0c;屏幕缓冲区的末尾都会含有这个字符 scanf的…

综合知识篇08-数据库系统考点(2024年软考高级系统架构设计师冲刺知识点总结系列文章)

专栏系列文章: 2024高级系统架构设计师备考资料(高频考点&真题&经验)https://blog.csdn.net/seeker1994/category_12593400.html案例分析篇00-【历年案例分析真题考点汇总】与【专栏文章案例分析高频考点目录】(2024年软考高级系统架构设计师冲刺知识点总结-案例…

【工具推荐】tmux 终端与会话分离神器 | 再也不用担心训练到一半不小心关闭终端导致训练终止了

文章目录 [toc] 0 什么是终端&#xff1f;什么是会话&#xff1f;1 tmux的安装2 tmux的基本操作2.1 启动与退出&#xff08;杀死tmux&#xff09;2.2 分离会话2.3 重接会话2.4 当前已有的会话查看2.5 切换会话 0 什么是终端&#xff1f;什么是会话&#xff1f; tmux是一个 ter…

每个私域运营者都必须掌握的 5 大关键流量运营核心打法!

很多人觉得私域运营比较简单&#xff0c;只是运营的事情&#xff0c;但事实并非如此&#xff0c;私域运营体系非常大&#xff0c;包含了公私域联动、品牌运营、品类战略&#xff0c;它是一个自上而下&#xff0c;由内到外的系统化工程。 很多人天天在想着如何引流拓客&#xf…

人民币跨境支付系统CIPS应用架构设计

人民币跨境支付系统&#xff08;Cross-border Interbank Payment System&#xff0c;简称CIPS&#xff09;作为中国重要的金 融市场基础设施之一&#xff0c;为境内外机构提供人民币跨境支付清算服务及其他相关服务。随着CIPS网络延伸 和规模扩大&#xff0c;为保障公司核心竞争…

每日一题——LeetCode1694.重新格式化电话号码

方法一 模拟&#xff1a; 首先去除number里面的破折号和空格&#xff0c;取出纯数字组成的字符串str。 对于str每三个数分成一组&#xff0c;加一个破折号&#xff0c;当str的长度小于等于4时再分情况讨论&#xff0c;如果等于4就分为22形式&#xff0c;如果小于4&#xff0c…

网络编程--高并发服务器

这里写目录标题 引入场景 多进程并发服务器二级目录二级目录二级目录 多线程并发服务器二级目录二级目录二级目录 多路IO转接服务器设计思路对比引入 select函数简介参数介绍第一个参数第234参数返回值对于第234参数的应用对于最后一个参数总结 附加操作&#xff08;附加四个函…

一招搞定:教你用苹果手机截取滚屏网页

打开Safari浏览器&#xff0c;进入需要截取的网页。 点击屏幕底部的分享按钮&#xff0c;即中间有一个向上箭头的矩形图标。 在弹出的分享菜单中&#xff0c;向左滑动找到“截屏”选项&#xff0c;点击后选择“整页”。 系统会自动将网页保存为PDF文件&#xff0c;并自动打开…

【Redis知识点总结】(五)——Redis实现分布式锁

Redis知识点总结&#xff08;五&#xff09;——Redis实现分布式锁 setnxsetnx expiresetnx expire lua脚本set nx exset nx ex 随机值set nx ex 随机值 lua脚本set ex nx 随机值 lua脚本 锁续期RedissonRedLock 在Redis的众多应用场景中&#xff0c;分布式锁是Redis比…

Ypay源支付2.8.8免授权聚合免签系统

本帖最后由 renleixiaoxu 于 2024-3-15 09:46 编辑 产品介绍 XPay是专为个人站长打造的聚合免签系统&#xff0c;拥有卓越的性能和丰富的功能。采用全新轻量化的界面UI&#xff0c;让您可以更加方便快捷地解决 知识付费和运营赞助的难题。同时&#xff0c;它基于高性能的Thin…

算法练习:前缀和

目录 1. 一维前缀和2. 二维前缀和3. 寻找数组中心下标4. 除自身以外数组的乘积5. !和为k的子数字6. !和可被k整除的子数组7. !连续数组8. 矩阵区域和 1. 一维前缀和 题目信息&#xff1a; 题目链接&#xff1a; 一维前缀和思路&#xff1a;求前缀和数组&#xff0c;sum dp[r] …