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

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

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

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

原 SVG 文本:

<svg t="1572520948109" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6553" width="200" height="200"><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="6554"></path></svg>

XAML 代码:

  <Path Width="100" Height="100" 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="450" Width="800">
    <Grid>
        <StackPanel>
            <Button Width="100" Height="100">
                <svgc:SvgViewbox IsHitTestVisible="False"  Source="pack://application:,,,/1.svg"/>
            </Button>
          </StackPanel>
    </Grid>
</Window>

猜你喜欢

转载自www.cnblogs.com/aitong/p/11773270.html