WPF svg转path(快速生成Path代码的方法)

发布时间 2023-08-03 17:04:43作者: 苏州の酱醋茶

在使用WPF的Path作图时,我们可能会拿到美工出的一些比较复杂的图,今天查阅网上发现svg是可以自动转path的,特作记录。

github:https://github.com/BerndK/SvgToXaml

 

 

 

 

设置途中项目为启动项目,然后点击svg图片

 你是不是以为复制上面的M0,0一直到Z就OK了!那,我就不会写这篇文章了。

其实坑就坑在svg上,如果向上面两种svg都是由矩形堆起来做的,那么你是没办法解析为一个完整的path的。

说人话就是像这样的图可以直接被完整的解析为path:

code:

<Path Data="M263.577601 776.630449a242.559588 242.559588 0 0 1 138.417007-218.124973L483.818959 
              23.36268a27.485506 27.485506 0 0 1 54.283873 0l81.824351 535.142796a242.559588 242.559588 
              0 0 1 138.417006 218.124973 247.369551 247.369551 0 0 1-494.739102 0z"/>

这张图的svg代码是:

<svg t="1691051036795" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6853" width="64" height="64">
<path d="M263.577601 776.630449a242.559588 242.559588 0 0 1 138.417007-218.124973L483.818959 23.36268a27.485506 27.485506 0 0 1 54.283873 0l81.824351 535.142796a242.559588 242.559588
0 0 1 138.417006 218.124973 247.369551 247.369551 0 0 1-494.739102 0z
" p-id="6854"></path></svg>

 

 那么这时候你有两种选择,一是找美工在要一个像上图那样一笔画成的svg图片

二是去阿里图标库找一个

 亲试,他们的图标基本都是一笔做成的,说人话就是可以直接被转化为一个完整的path(如果使用阿里图标库的,直接使用他界面上的复制svg代码即可,无需使用上述工具了)

最后,,,祝大家画图顺利(毕竟WPF的Path作图挺恶心的)