Svg 图标转换成Wpf path Geometry

  • 说明
    • 转换步骤
    • 注意
    • 使用代码
    • 效果

说明

其实是很简单的就可以完成的，那为何还要用一篇文章来记录。是因为自己粗心，在操作时少删除了一个 “"” 分号，导致转换不成功。

第一次转换的 错误代码

<Geometry o:Freeze="True" x:Key="NoticeGeometry">M454.943 95.887V13.653A13.653 13.653 0 0 1 468.596 0h81.92a13.653 13.653 0 0 1 13.653 13.653v81.995C723.135 99.28 850.89 229.28 850.89 389.12v418.57l98.065 75.804a13.653 13.653 0 0 1-8.349 24.453H78.507a13.653 13.653 0 0 1-8.35-24.453l104.892-81.08V389.12c0-157.546 124.11-286.106 279.894-293.233z m-20.48 853.02h157.013C574.027 994.352 545.37 1024 512.97 1024s-61.057-29.648-78.506-75.093z"
</Geometry>

在结尾处 “Geometry结束标签” 前面 想当然的认为是要有一个 " 分号。所以Vs 报错 “无法从文本 xxxxxxx 生成 Geometry ”

转换步骤

  1. 到阿里巴巴 的字体图标库里，查找要转换的 图标
  2. 点击图标 下载 ->复制SVG,复制的内容如下
<svg t="1608609513612" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28515" width="128" height="128"><path d="M890.368 334.336c9.216 13.312 18.432 26.624 27.648 40.448 0.512 0 0.512 0.512 1.024 0.512l32.256-52.224c16.896-25.088 35.328-45.056 45.568-78.336 19.456-64.512-26.624-112.128-87.04-110.592-4.096 0.512-8.704 1.536-12.8 2.048-14.848 4.096-29.696 13.312-37.888 24.064-7.168 8.704-13.824 17.92-18.432 29.184-11.264 28.16-2.56 61.44 9.728 80.896 12.8 21.504 26.624 43.008 39.936 64zM881.152 209.92c5.632-17.92 17.408-21.504 34.304-28.16 53.248-1.024 54.272 74.752 5.12 81.92-25.088 3.584-47.616-28.16-39.424-53.76zM938.496 631.808c-46.592-30.72-93.696-60.928-140.288-91.648-15.872-10.752-32.256-22.016-48.128-32.768l-95.232-52.224c-16.896-9.728-36.864-18.432-50.176-31.744-0.512 0-0.512-0.512-1.024-0.512 63.488-13.312 129.536-13.824 196.096-25.088 34.304-4.096 68.096-7.68 102.4-11.776v-0.512c-5.12-7.168-19.968-27.136-27.648-30.72-8.704 0.512-17.408 1.536-25.6 2.048-30.72 2.048-61.952 3.584-92.672 5.632-24.064 3.584-48.64 0.512-74.24 4.608-71.68 6.656-143.872 13.312-215.552 19.456 32.256 25.088 65.024 50.176 97.28 74.752 34.816 23.04 72.192 41.472 105.984 65.536 43.008 33.28 86.016 66.56 128.512 100.352 0.512 0.512 0.512 1.024 1.024 1.536-103.424 6.656-206.848 13.312-309.76 19.456-20.992 1.024-41.984 2.048-62.464 2.56-25.6 4.096-49.152 5.12-72.704 9.728-11.264 1.536-22.528 3.584-34.304 5.12l-101.376 170.496c-0.512 0.512-0.512 1.024-1.024 1.536 114.688-25.088 233.472-44.032 349.696-70.144l188.928-33.792c89.088-15.36 178.688-30.72 267.776-46.08v-0.512c-28.672-17.92-56.832-36.864-85.504-55.296zM270.848 678.912c33.792-47.104 65.536-84.48 85.504-147.968 44.544-141.312-45.568-257.024-183.296-254.464-10.752 4.096-26.624 3.072-37.376 6.144-32.256 9.728-62.976 29.184-81.92 52.736-16.384 20.48-31.232 40.96-41.984 67.584C-12.8 465.92 5.12 532.48 32.768 577.536c31.744 51.712 64 102.4 98.304 151.552 18.432 27.136 36.352 54.272 54.784 80.896 0.512 0.512 1.024 0.512 1.536 1.024 11.264-18.432 22.528-36.864 34.304-55.296 16.384-26.112 31.744-52.224 49.152-76.8z m-166.912-89.6V387.584h68.096c19.968 0 35.84 1.536 48.128 4.096 12.288 3.072 23.552 7.68 33.28 14.336 14.336 9.728 25.6 21.504 33.792 36.352s12.288 30.208 12.288 46.592c0 15.872-3.072 30.208-9.216 44.032-6.144 13.312-15.36 25.088-26.624 35.328-8.704 7.168-18.432 12.288-29.696 15.872s-24.064 5.632-36.864 5.632l-93.184-0.512z" fill="#666666" p-id="28516"></path><path d="M223.232 433.664c-10.24-12.8-24.576-19.456-43.008-19.456h-19.456v147.456h19.456c18.432 0 33.28-6.656 43.008-19.456s15.36-31.232 15.36-54.784c0-22.528-5.12-40.96-15.36-53.76z" fill="#666666" p-id="28517"></path>
</svg>
  1. 在WPF 项目 里 新建一个 资源字典 文件，在添加 Gemetry；
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:o="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"><Geometry o:Freeze="True" x:Key="ODDataGeometry">**这里只要SVG　内容的 <path d="" ** 里面的的内容</Geometry>
</ResourceDictionary>
  1. 最终代码
   <Geometry o:Freeze="True" x:Key="ODDataGeometry">M890.368 334.336c9.216 13.312 18.432 26.624 27.648 40.448 0.512 0 0.512 0.512 1.024 0.512l32.256-52.224c16.896-25.088 35.328-45.056 45.568-78.336 19.456-64.512-26.624-112.128-87.04-110.592-4.096 0.512-8.704 1.536-12.8 2.048-14.848 4.096-29.696 13.312-37.888 24.064-7.168 8.704-13.824 17.92-18.432 29.184-11.264 28.16-2.56 61.44 9.728 80.896 12.8 21.504 26.624 43.008 39.936 64zM881.152 209.92c5.632-17.92 17.408-21.504 34.304-28.16 53.248-1.024 54.272 74.752 5.12 81.92-25.088 3.584-47.616-28.16-39.424-53.76zM938.496 631.808c-46.592-30.72-93.696-60.928-140.288-91.648-15.872-10.752-32.256-22.016-48.128-32.768l-95.232-52.224c-16.896-9.728-36.864-18.432-50.176-31.744-0.512 0-0.512-0.512-1.024-0.512 63.488-13.312 129.536-13.824 196.096-25.088 34.304-4.096 68.096-7.68 102.4-11.776v-0.512c-5.12-7.168-19.968-27.136-27.648-30.72-8.704 0.512-17.408 1.536-25.6 2.048-30.72 2.048-61.952 3.584-92.672 5.632-24.064 3.584-48.64 0.512-74.24 4.608-71.68 6.656-143.872 13.312-215.552 19.456 32.256 25.088 65.024 50.176 97.28 74.752 34.816 23.04 72.192 41.472 105.984 65.536 43.008 33.28 86.016 66.56 128.512 100.352 0.512 0.512 0.512 1.024 1.024 1.536-103.424 6.656-206.848 13.312-309.76 19.456-20.992 1.024-41.984 2.048-62.464 2.56-25.6 4.096-49.152 5.12-72.704 9.728-11.264 1.536-22.528 3.584-34.304 5.12l-101.376 170.496c-0.512 0.512-0.512 1.024-1.024 1.536 114.688-25.088 233.472-44.032 349.696-70.144l188.928-33.792c89.088-15.36 178.688-30.72 267.776-46.08v-0.512c-28.672-17.92-56.832-36.864-85.504-55.296zM270.848 678.912c33.792-47.104 65.536-84.48 85.504-147.968 44.544-141.312-45.568-257.024-183.296-254.464-10.752 4.096-26.624 3.072-37.376 6.144-32.256 9.728-62.976 29.184-81.92 52.736-16.384 20.48-31.232 40.96-41.984 67.584C-12.8 465.92 5.12 532.48 32.768 577.536c31.744 51.712 64 102.4 98.304 151.552 18.432 27.136 36.352 54.272 54.784 80.896 0.512 0.512 1.024 0.512 1.536 1.024 11.264-18.432 22.528-36.864 34.304-55.296 16.384-26.112 31.744-52.224 49.152-76.8z m-166.912-89.6V387.584h68.096c19.968 0 35.84 1.536 48.128 4.096 12.288 3.072 23.552 7.68 33.28 14.336 14.336 9.728 25.6 21.504 33.792 36.352s12.288 30.208 12.288 46.592c0 15.872-3.072 30.208-9.216 44.032-6.144 13.312-15.36 25.088-26.624 35.328-8.704 7.168-18.432 12.288-29.696 15.872s-24.064 5.632-36.864 5.632l-93.184-0.512zM223.232 433.664c-10.24-12.8-24.576-19.456-43.008-19.456h-19.456v147.456h19.456c18.432 0 33.28-6.656 43.008-19.456s15.36-31.232 15.36-54.784c0-22.528-5.12-40.96-15.36-53.76z</Geometry>

注意

SVG 是有多个 Path 的，在Geometry 里面就有几行以 M 开头的数据。
放在一行也行，注意用空格隔开。
代码行太长不好操作，最好的分成多行。

使用代码

<hc:Badge Value="5" Margin="5,0" BadgeMargin="0,-2,-5,0" ToolTip="未补税"     Height="30" Width="40"  Background="Transparent" BorderThickness="0" Foreground="White"><Path  Data="{StaticResource ODDataGeometry}" Fill="White" Height="18" Width="18"/>
</hc:Badge>

效果

第一次转换报错时，没有仔细检查自己的代码，就是去 BaiDu ,看也些无用的东西，白白浪费几个小时的时间 。写代码真的要细心。

Svg 图标转换成Wpf path Geometry相关推荐

  1. 将svg图标转换成iconfont图标

    1.打开https://icomoon.io/app/#/select地址,如下图所示: 2.选择Import Icons从本地计算机中导入svg图标,此时会在Untitled Set中显示出来上传的 ...

  2. 把svg图标制作成字体图标_让我们用SVG符号和CSS变量制作彩色图标

    把svg图标制作成字体图标 by Sarah Dayan 通过莎拉·达扬 让我们用SVG符号和CSS变量制作彩色图标 (Let's make multi-colored icons with SVG ...

  3. svg怎么转换成png格式？

    svg怎么转换成png格式?在我们日常的工作和学习当中,会使用各种格式的图片,在使用的过程中,我们会发现每种格式的图片所具备的特点是完全不同的.像svg就是一种矢量图,一系列由线连接的点的实体,一般在 ...

  4. 将小图标转换成字体图标代码

    将小图标转换成字体图标代码 转自:https://jingyan.baidu.com/article/ea24bc39ddff7bda62b331b0.html

  5. java处理word公式（wmf格式转换成svg）（svg格式转换成png）

    wmf格式转换成svg 把wmf格式转成svg格式,这样就能在浏览器中显示了 需要第三方jar包:wmf2svg-0.9.6.jar //wmf格式的图片转换成svg格式 private void c ...

  6. 通过svg可以转换成iconfont字体图标

    前些天,因为项目需求,菜单要求图标为字体图标,但是UI设计图只给了png格式,所以研究了一番,可以通过把png转换为svg格式,然后通过在一个网站上转换为iconfont字体图标,并可以打包用在实际项 ...

  7. 图标转换成web字体

    方法一:自我实现 首先,准备好你的svg图标: 其次:可用fontographer工具进行排版,然后导出font字体: 第三:导出的字体只是一种格式,在现代浏览器还没有统一字体格式的情况下,你还得使用 ...

  8. 如何将阿里云天气接口中返回的天气图标转换成对应的url

    上一篇文章中我们谈到了阿里云天气接口的使用,但是,在这个接口返回的数据中,有一个图标问题是需要我们注意的. 如图所示: 阿里云接口返回的天气图标是一个状态值,拿到之后是没法直接使用的,所以,我们需要将 ...

  9. iconfont 图标转为字体_如何把你的图标转换成web字体

    我已经制为网站制作了一些优雅的图标,并且在新的网站和老的iPad上进行了测试.正常尺寸下,布局看看上去一切OK,但的将页面进行放大显示,我却发现我的icon变得模糊不清,但是基于文本的标题依然清晰可见 ...

最新文章

  1. python装饰器原理-python装饰器的原理和使用
  2. 设计模式:享元模式(Flyweight Pattern)
  3. 【人物】李开复：未来属于创新者和小公司
  4. struts2配置文件中action的name属性
  5. android ndk使用c 11,使用c 11 std :: async在android ndk中使用不完整类型无效
  6. python程序设计基础试题及答案_智慧职教2020Python程序设计基础题目及答案
  7. PCI、PCI-X、PCI-E AGP区别
  8. MySQL学习笔记：三种组内排序方法
  9. 韩国遭 Lazarus Group 供应链攻击
  10. 【Stimulsoft Reports Silverlight教程】使用报表组件
  11. 【CVE-2016-10009】OpenSSH 7.4 - agent Protocol Arbitrary Library Loading
  12. 波形图控件html,[转载]LabVIEW中的波形图(Waveform Chart)详解
  13. 深入剖析线程同步工具CountDownLatch原理
  14. Laravel Excel导出xls乱码
  15. STM32蓝牙小车以及PWM调速
  16. 华大HC32F460系列填坑之USART
  17. 微信小程序父子组件通信详解
  18. 搜索网页显示找不到服务器,显示：DNS 查找失败，因此找不到 x 的服务器。DNS 是将网站名称解析为互联网地址的网络服务...
  19. 双端队列--------------------------------思维(性质)
  20. 软件测试简历编写以及软件测试面试题大全（接口、自动化测试面试题）赶快收藏

热门文章

  1. vnc改ip_修改vnc server
  2. 查看linux vnc用户名,Linux-VNC简单介绍
  3. C语言程序设计-现代方法 第二版 第3.2.3小节 分数相加
  4. sqlerver2008重启计算机,SQL SERVER 2008 R2安装的时候提示“该实例名称MSSQLSERVER已在使用...
  5. 如何利用绘制流程图在线网站绘制业务流程图
  6. 视通科技互动录播主机，互动教学超简单！
  7. 浅谈SQL Server索引视图（物化视图）以及索引视图与查询重写
  8. 电大计算机应用基础课程形成考核,2016年电大-电大计算机应用基础形成性考核.doc...
  9. POJ1184-Smart typist
  10. 30 个重要数据结构和算法完整介绍(建义收藏保存)