当前位置：首页 > news >正文

WPF怎么使用svg矢量图片的svg代码生成Path矢量图形

news 2026/3/26 19:18:49

核心原理：路径语法的共通性

SVG中的<path>元素使用d属性来定义路径，例如：

<pathd="M10 10 H 90 V 90 H 10 Z"/>

WPF中的Path元素使用Data属性（其类型为Geometry，常用PathGeometry）来定义路径，其路径标记语法与SVG几乎完全相同：

<PathData="M10 10 H 90 V 90 H 10 Z"/>

正是因为这种语法上的一致性，使得将SVG用于WPF成为可能。您需要做的就是提取SVG中的路径数据，并放入WPF的Path.Data中。

阿里巴巴图标库：
https://www.iconfont.cn/

比如这里找一个时钟的图片

点击【复制SVG代码】，粘贴到文本编辑器里面，然后复制里面的<path标签的d属性，把d里面的路径数据复制，然后粘贴到wpf的Path元素的Data中

<GridWidth="50"Height="50"Margin="10"ToolTip="时钟"><PathData="M511.913993 63.989249c-247.012263 0-447.924744 200.912481-447.924744 447.924744s200.912481 447.924744 447.924744 447.924744 447.924744-200.912481 447.924744-447.924744S758.926256 63.989249 511.913993 63.989249zM511.913993 895.677474c-211.577356 0-383.763481-172.186125-383.763481-383.763481 0-211.577356 172.014111-383.763481 383.763481-383.763481s383.763481 172.014111 383.763481 383.763481S723.491349 895.677474 511.913993 895.677474z"Fill="LimeGreen"Stretch="Uniform"></Path><BorderWidth="20"Height="20"Margin="10,-11,0,0"><PathFill="LimeGreen"Stretch="Uniform"Data="M672.05913 511.913993l-159.973123 0L512.086007 288.123635c0-17.717453-14.277171-32.166639-31.994625-32.166639-17.717453 0-31.994625 14.449185-31.994625 32.166639l0 255.956996c0 17.717453 14.277171 31.994625 31.994625 31.994625l191.967747 0c17.717453 0 32.166639-14.277171 32.166639-31.994625C704.053754 526.191164 689.604569 511.913993 672.05913 511.913993z"/></Border></Grid>

效果图：

xaml页面参考代码：

<Windowx:Class="WpfApp2.MainWindow"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:WpfApp2"mc:Ignorable="d"Title="MainWindow"Height="450"Width="800"><GridMargin="50"><StackPanelHorizontalAlignment="Left"Orientation="Horizontal"><GridWidth="30"Height="30"Margin="10"ToolTip="锁"><PathData="M916.210526 1024 107.789474 1024C78.012632 1024 53.894737 999.855158 53.894737 970.105263L53.894737 485.052632C53.894737 455.275789 78.012632 431.157895 107.789474 431.157895L188.631579 431.157895 188.631579 323.368421C188.631579 144.761263 333.419789 0 512 0 690.580211 0 835.368421 144.761263 835.368421 323.368421L835.368421 431.157895 916.210526 431.157895C945.987368 431.157895 970.105263 455.275789 970.105263 485.052632L970.105263 970.105263C970.105263 999.855158 945.987368 1024 916.210526 1024ZM781.473684 323.368421C781.473684 174.538105 660.830316 53.894737 512 53.894737 363.169684 53.894737 242.526316 174.538105 242.526316 323.368421L242.526316 431.157895 781.473684 431.157895 781.473684 323.368421ZM916.210526 485.052632 835.368421 485.052632 188.631579 485.052632 107.789474 485.052632 107.789474 970.105263 916.210526 970.105263 916.210526 485.052632ZM512 592.842105C526.874947 592.842105 538.947368 604.914526 538.947368 619.789474L538.947368 835.368421C538.947368 850.243368 526.874947 862.315789 512 862.315789 497.125053 862.315789 485.052632 850.243368 485.052632 835.368421L485.052632 619.789474C485.052632 604.914526 497.125053 592.842105 512 592.842105Z"Fill="Red"Stretch="Uniform"></Path></Grid><GridWidth="30"Height="30"Margin="10"ToolTip="锁"><PathData="M512 35.446154c154.820923 0 279.630769 129.851077 279.630769 289.201231v104.723692l2.993231 0.118154A122.092308 122.092308 0 0 1 909.784615 551.384615v315.076923a122.092308 122.092308 0 0 1-122.092307 122.092308H236.307692A122.092308 122.092308 0 0 1 114.215385 866.461538v-315.076923a122.092308 122.092308 0 0 1 118.153846-122.013538V324.647385C232.369231 165.297231 357.179077 35.446154 512 35.446154z m275.692308 480.492308H236.307692a35.446154 35.446154 0 0 0-35.446154 35.446153v315.076923a35.446154 35.446154 0 0 0 35.446154 35.446154h551.384616a35.446154 35.446154 0 0 0 35.446154-35.446154v-315.076923a35.446154 35.446154 0 0 0-35.446154-35.446153zM512 590.769231a78.769231 78.769231 0 0 1 35.446154 149.149538v37.572923a35.446154 35.446154 0 1 1-70.892308 0l-0.039384-37.612307A78.769231 78.769231 0 0 1 512 590.769231z m0-468.676923c-106.180923 0-192.984615 90.308923-192.984615 202.555077V429.292308h385.96923V324.647385c0-112.246154-86.803692-202.555077-192.984615-202.555077z"Fill="Blue"Stretch="Uniform"></Path></Grid><GridWidth="30"Height="30"Margin="10"ToolTip="右箭头▶"><BorderBackground="Blue"CornerRadius="30"></Border><PathData="M679.5008 500.096v-23.80288h-23.808v-23.80288h-23.80288v-23.808h-23.80288v-23.80288h-23.808v-23.86944h-23.808v-23.80288h-23.86944v-23.80288h-23.80288v-23.808h-23.80288v-23.808h-23.808v-23.808h-23.80288v-23.80288h-23.808v-23.86944h-23.80288v-23.80288h-23.86944v-23.80288h-23.80288v-23.808h-23.808V119.0912h-23.808v-23.80288h-23.80288V71.4752H250.88V0h71.41376v23.80288h23.808v23.86944h23.80288v23.80288h23.86944v23.81312h23.80288v23.80288h23.808v23.80288h23.80288v23.808h23.808v23.80288h23.80288v23.80288h23.80288v23.86944h23.86944v23.80288h23.808v23.808h23.808v23.808h23.80288v23.808h23.80288v23.80288h23.808v23.80288h23.80288v23.86944h23.86944v23.80288h23.80288v23.808h23.80288v23.80288h23.808V547.77344h-23.808v23.80288h-23.80288v23.808h-23.80288v23.808h-23.86944v23.80288h-23.80288v23.80288h-23.808v23.80288h-23.80288v23.86944h-23.80288v23.808h-23.808v23.80288h-23.808v23.808h-23.86944v23.80288h-23.80288v23.808h-23.80288v23.80288h-23.808v23.80288h-23.80288v23.86944h-23.808v23.808h-23.80288v23.80288h-23.86944v23.808h-23.80288v23.80288h-23.808V1024H250.88v-71.41376h23.80288v-23.80288h23.80288v-23.808h23.808v-23.86944h23.808v-23.80288h23.80288v-23.80288h23.86944v-23.808h23.80288v-23.80288h23.808v-23.808h23.80288v-23.80288h23.808v-23.808h23.80288v-23.86944h23.80288v-23.80288h23.86944v-23.80288h23.808v-23.80288h23.808v-23.808h23.80288v-23.808h23.80288v-23.86432h23.808v-23.808h23.80288v-23.808z"Fill="White"Stretch="Uniform"Margin="5"></Path></Grid><GridWidth="30"Height="30"Margin="10"ToolTip="左箭头◀"><BorderBackground="Blue"CornerRadius="30"></Border><PathData="M679.5008 500.096v-23.80288h-23.808v-23.80288h-23.80288v-23.808h-23.80288v-23.80288h-23.808v-23.86944h-23.808v-23.80288h-23.86944v-23.80288h-23.80288v-23.808h-23.80288v-23.808h-23.808v-23.808h-23.80288v-23.80288h-23.808v-23.86944h-23.80288v-23.80288h-23.86944v-23.80288h-23.80288v-23.808h-23.808V119.0912h-23.808v-23.80288h-23.80288V71.4752H250.88V0h71.41376v23.80288h23.808v23.86944h23.80288v23.80288h23.86944v23.81312h23.80288v23.80288h23.808v23.80288h23.80288v23.808h23.808v23.80288h23.80288v23.80288h23.80288v23.86944h23.86944v23.80288h23.808v23.808h23.808v23.808h23.80288v23.808h23.80288v23.80288h23.808v23.80288h23.80288v23.86944h23.86944v23.80288h23.80288v23.808h23.80288v23.80288h23.808V547.77344h-23.808v23.80288h-23.80288v23.808h-23.80288v23.808h-23.86944v23.80288h-23.80288v23.80288h-23.808v23.80288h-23.80288v23.86944h-23.80288v23.808h-23.808v23.80288h-23.808v23.808h-23.86944v23.80288h-23.80288v23.808h-23.80288v23.80288h-23.808v23.80288h-23.80288v23.86944h-23.808v23.808h-23.80288v23.80288h-23.86944v23.808h-23.80288v23.80288h-23.808V1024H250.88v-71.41376h23.80288v-23.80288h23.80288v-23.808h23.808v-23.86944h23.808v-23.80288h23.80288v-23.80288h23.86944v-23.808h23.80288v-23.80288h23.808v-23.808h23.80288v-23.80288h23.808v-23.808h23.80288v-23.86944h23.80288v-23.80288h23.86944v-23.80288h23.808v-23.80288h23.808v-23.808h23.80288v-23.808h23.80288v-23.86432h23.808v-23.808h23.80288v-23.808z"Fill="White"Stretch="Uniform"Margin="5"RenderTransformOrigin="0.5,0.5"><Path.RenderTransform><RotateTransformAngle="180"/></Path.RenderTransform></Path></Grid><GridWidth="50"Height="50"Margin="10"ToolTip="床位"><BorderBackground="Blue"CornerRadius="30"></Border><PathData="M1593.17 597.333H227.84c-34.588 0-49.664-22.87-49.664-56.548 0-33.28 27.705-60.586 62.236-60.586h280.804l47.957-110.421h910.222c53.76 6.372 113.209 8.476 113.607 62.18l0.455 169.358-0.287-3.983zM340.252 453.575c-69.632 0-125.952-54.613-125.952-123.051 0-67.982 56.32-122.652 125.952-122.652 69.575 0 125.838 54.613 125.838 122.652 0 68.437-56.377 123.051-125.838 123.051z m1251.27 541.639l-112.122 0.342V768H114.062v227.556L0 995.215V97.166C0 59.45 30.834 28.73 69.177 28.73c38.969 0 69.803 30.72 69.803 68.437v560.64h1452.54v337.408z"Fill="White"Stretch="Uniform"Margin="6"></Path></Grid><GridWidth="50"Height="50"Margin="10"ToolTip="时钟"><PathData="M511.913993 63.989249c-247.012263 0-447.924744 200.912481-447.924744 447.924744s200.912481 447.924744 447.924744 447.924744 447.924744-200.912481 447.924744-447.924744S758.926256 63.989249 511.913993 63.989249zM511.913993 895.677474c-211.577356 0-383.763481-172.186125-383.763481-383.763481 0-211.577356 172.014111-383.763481 383.763481-383.763481s383.763481 172.014111 383.763481 383.763481S723.491349 895.677474 511.913993 895.677474z"Fill="LimeGreen"Stretch="Uniform"></Path><BorderWidth="20"Height="20"Margin="10,-11,0,0"><PathFill="LimeGreen"Stretch="Uniform"Data="M672.05913 511.913993l-159.973123 0L512.086007 288.123635c0-17.717453-14.277171-32.166639-31.994625-32.166639-17.717453 0-31.994625 14.449185-31.994625 32.166639l0 255.956996c0 17.717453 14.277171 31.994625 31.994625 31.994625l191.967747 0c17.717453 0 32.166639-14.277171 32.166639-31.994625C704.053754 526.191164 689.604569 511.913993 672.05913 511.913993z"/></Border></Grid><GridWidth="50"Height="50"Margin="10"ToolTip="打钩"><PathData="M512.3 960.5c-247.5 0-448.1-200.6-448.1-448.1S264.8 64.2 512.3 64.2s448.1 200.6 448.1 448.1-200.6 448.2-448.1 448.2z m252.6-587.1c-8.8-8.7-22.9-8.7-31.7 0L463.8 642.8 321.2 500.2c-8.8-8.8-22.9-8.8-31.7 0-8.7 8.8-8.7 22.9 0 31.7L448 690.3c8.8 8.7 22.9 8.7 31.7 0l285.2-285.2c8.7-8.8 8.7-23 0-31.7z"Fill="LimeGreen"Stretch="Uniform"Margin="0"></Path></Grid></StackPanel></Grid></Window>