原文:c# WPF SVG 文件的引用(SharpVectors)

阿里巴巴矢量图标库提供了大量的 SVG 图标:https://www.iconfont.cn/

但是 WPF 本身不支持 SVG 格式的文件。

方法一:如果对图片的颜色没有要求,那么可以在下载图片时选择:复制 SVG ,然后将文本中的 Path 路径提取出来,多个路径之间用空格隔开。这种方法只能调节图像的前景色和背景色。

原 SVG 文本:

<svg t="" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="" width="" height=""><path d="M651.424 217.066667a32 32 0 0 1 62.485333 13.866666L682.261333 373.333333H800a32 32 0 0 1 31.946667 30.122667L832 405.333333a32 32 0 0 1-32 32H668.032l-33.184 149.333334H800a32 32 0 0 1 31.946667 30.122666L832 618.666667a32 32 0 0 1-32 32H620.629333l-34.72 156.266666a32 32 0 0 1-36.341333 24.661334l-1.845333-0.352a32 32 0 0 1-24.298667-38.186667L555.061333 650.666667H407.296l-34.72 156.288a32 32 0 0 1-36.341333 24.64l-1.845334-0.341334a32 32 0 0 1-24.298666-38.186666L341.728 650.666667 224 650.666667a32 32 0 0 1-31.946667-30.122667L192 618.666667a32 32 0 0 1 32-32h131.957333l33.184-149.333334H224a32 32 0 0 1-31.946667-30.122666L192 405.333333a32 32 0 0 1 32-32h179.36l34.730667-156.266666a32 32 0 0 1 36.341333-24.661334l1.845333 0.352a32 32 0 0 1 24.298667 38.186667l-31.648 142.378667h147.765333zM602.474667 437.333333H454.698667l-33.184 149.333334h147.776l33.184-149.333334z" p-id=""></path></svg>

XAML 代码:

  <Path Width="" Height="" Stretch="Uniform" Data="M856.34479531 833.26631065a42.58114365 42.58114365 0 0 0 40.27053867-48.19261201l-16.1742331-88.13306426A80.87116377 80.87116377 0 0 0 805.18140547 632.57378926h-193.76070732l-15.84414581-99.02591543a236.01176455 236.01176455 0 0 0 148.20878584-221.81804912 240.96306006 240.96306006 0 1 0-481.59603369 0 236.34185098 236.34185098 0 0 0 148.53887226 220.49770341l-11.88310956 99.02591544H206.07461914a77.57030039 77.57030039 0 0 0-76.24995469 64.36684511L113.65043222 783.75335293a37.95993369 37.95993369 0 0 0 36.30950156 48.19261201z M161.51295781 862.97408457h693.18140537a49.51295771 49.51295771 0 0 1 49.51295772 49.51295772 49.51295771 49.51295771 0 0 1-49.51295772 49.51295771h-693.18140537A49.51295771 49.51295771 0 0 1 112.0000001 912.48704229 49.51295771 49.51295771 0 0 1 161.51295781 862.97408457z M664.89469297 277.0707544m-33.00863906 0a33.00863818 33.00863818 0 1 0 66.01727724 0 33.00863818 33.00863818 0 1 0-66.01727724 0Z M527.57875654 144.37602793a177.91656065 177.91656065 0 0 1 56.11468536 28.71751553 165.0431918 165.0431918 0 0 1 33.00863906 47.86252558 25.08656484 25.08656484 0 0 0 44.2315749-23.10604716 221.81805 221.81805 0 0 0-46.21209346-62.05624014A216.20658164 216.20658164 0 0 0 542.43264394 97.50376162a24.7894875 24.7894875 0 0 0-16.17423222 46.87226631z" />
      

方法二:使用 nuget 安装 sharpvectors 包:

Install-Package SharpVectors -Version 1.0.0

在调试时走了一点弯路,后来看到了这篇问答:http://www.jiajianhudong.com/question/778215.html 。

总之要注意两点:1.使用     Source="pack://application:,,,/1.svg"      这种方法来调用 svg 文件,这样才能正确的调用资源。

2. svg 文件的属性默认是内容,务必改为  Resource,然后一定要重新生成项目再运行。

<Window x:Class="WpfStudy.Wnd1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfStudy"
mc:Ignorable="d"
xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
Title="Wnd1" Height="" Width="">
<Grid>
<StackPanel>
<Button Width="" Height="">
<svgc:SvgViewbox IsHitTestVisible="False" Source="pack://application:,,,/1.svg"/>
</Button>
</StackPanel>
</Grid>
</Window>

c# WPF SVG 文件的引用(SharpVectors)的更多相关文章

  1. WPF中Style文件的引用——使用xaml代码或者C#代码动态加载

    原文:WPF中Style文件的引用--使用xaml代码或者C#代码动态加载 WPF中控件拥有很多依赖属性(Dependency Property),我们可以通过编写自定义Style文件来控制控件的外观 ...

  2. WPF 中style文件的引用

    原文:WPF 中style文件的引用 总结一下WPF中Style样式的引用方法: 一,内联样式: 直接设置控件的Height.Width.Foreground.HorizontalAlignment. ...

  3. SVG文件:从Illustrator导文件到Web

    可缩放矢量图形(SVG)是早在1998年就已经有的一种矢量图像格式.它总是和Web一起发展,但是直到现在才开始赶上Web发展的步伐.如今我们已经不能否认SVG和Web的相关性,所以让我们来学习一下从I ...

  4. svg矢量图标在html中的使用, (知识点:1.通过h5中的css实现点击变色,2.一个svg文件包含多个图标)

    svg矢量文件体积小,不变形,比传统的png先进,比现在流行的icon-font灵活.然而在使用过程中还是遇到了很多坑.今天花了一天时间把经验整理出来,以供后来者借鉴.如果您从本文收益,请留言mark ...

  5. 将指定路径下的所有SVG文件导出成PNG等格式的图片(缩略图或原图大小)

    原文:将指定路径下的所有SVG文件导出成PNG等格式的图片(缩略图或原图大小) WPF的XAML文档(Main.xaml): <Window x:Class="SVG2Image.Ma ...

  6. WPF svg 转 xmal

    原文:WPF svg 转 xmal 今天wpf里面要用矢量图,美工出的是svg格式的,需要将svg格式的转换为xaml 1.第一个尝试是安装Inkscape,这个软件可以直接将svg另存为xaml,但 ...

  7. 简单生成svg文件

    this.fileSaveSync = function (file, data) { var fs = require('fs-extra'); fs.writeFileSync(file, dat ...

  8. CDN的combo技术能把多个资源文件合并引用,减少请求次数

    CDN的combo技术能把多个资源文件合并引用,减少请求次数.比如淘宝的写法: <link rel="stylesheet" href="//g.alicdn.co ...

  9. NK3C:关于svg文件使用

    我们从 http://iconfont.cn/ 上下载的SVG文件由以下构成,系统中使用的时候请做适当的修改: 1.width.Height:设置为100%: 2.defs模块去掉:(如果不去掉,IE ...

随机推荐

  1. 苹果手机上input的button按钮颜色显示问题

    在苹果手机上的input按钮自带效果,需要加上outline:0px; -webkit-appearance:none; 清除原有样式,同时苹果手机上的input按钮自带圆角需要按需要去掉 input ...

  2. sh_10_体验模块

    sh_10_体验模块 import sh_10_分隔线模块 sh_10_分隔线模块.print_line("-", 50) print(sh_10_分隔线模块.name)

  3. 不属于java语言鲁棒性特点的是

      A:java能检查程序在编译和运行时的错误 B:java能运行虚拟机实现跨平台 C:java自己操纵内存减少了内存出错的可能性 D:java还实现了真数组,避免了覆盖数据的可能 鲁棒性(Robus ...

  4. 20182335实验一《Linux基础与Java开发环境》

    课程:<程序设计与数据结构> 班级: 1823 姓名: 李金泉 学号:20182335 实验教师:王志强 实验日期:2019年9月9日 必修/选修: 必修 1.实验内容 基于命令行和IDE ...

  5. ACM ICPC 2011-2012 Northeastern European Regional Contest(NEERC)K Kingdom Roadmap

    K: 给你n个点以及n-1的条边, 问你最少要加多少条边,使得每两个点割去一条联通的边,还可以使的这两个点连通. 有个一个结论,最少添加的边数为(叶子节点数+1)/ 2. 我们可以只考虑叶子节点数应该 ...

  6. What's the difference between HEAD^ and HEAD~ in Git?

    https://stackoverflow.com/questions/2221658/whats-the-difference-between-head-and-head-in-git Rules ...

  7. maven 成长之路

    1配置maven 环境变量 新建系统变量 M2_HOME :E:\apache-maven-3.5.2 在系统变量 path中添加 E:\apache-maven-3.5.2\bin 运行 mvn - ...

  8. python-接口开发flask模块(二)全局host配置

    设置全局变量优势很多主要是可以方便修改参数不需要每个代码单独修改,只修改host配置就可以,减少出错率,提高工作效率MYSQL_HOST = 'XXX.XXX.CCC.XXX' MYSQL_PORT ...

  9. 阶段3 1.Mybatis_04.自定义Mybatis框架基于注解开发_2 回顾自定义mybatis的流程分析

  10. php7.2 下安装swoole扩展

    git clone git@github.com:swoole/swoole-src.git phpize ./configure make && make test make ins ...