将多路径 SVG 转换为几何图形到 WPF [英] Convert Multipath SVG to Geometry to WPF

问题描述

我有一些我想在我的 WPF 应用程序中使用的图标，但是我需要它们是 Geometry 对象，我将如何将 SVG 转换为 Geometry，或者 Geometry 是否不允许构成复杂形状的多个路径?

I have got some Icons I want to use in my WPF Application, however I need them to be Geometry objects, how would I go about converting the SVG to Geometry, or does Geometry not allow for multiple Paths which make up complex shapes?

这是 SVG 数据，因此您可以看到我正在处理的内容:

This is the SVG Data, so you can see what i'm working with:

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="438.529px" height="438.528px" viewBox="0 0 438.529 438.528" style="enable-background:new 0 0 438.529 438.528;"
     xml:space="preserve">
<g>
    <g>
        <path d="M433.109,23.694c-3.614-3.612-7.898-5.424-12.848-5.424c-4.948,0-9.226,1.812-12.847,5.424l-37.113,36.835
            c-20.365-19.226-43.684-34.123-69.948-44.684C274.091,5.283,247.056,0.003,219.266,0.003c-52.344,0-98.022,15.843-137.042,47.536
            C43.203,79.228,17.509,120.574,5.137,171.587v1.997c0,2.474,0.903,4.617,2.712,6.423c1.809,1.809,3.949,2.712,6.423,2.712h56.814
            c4.189,0,7.042-2.19,8.566-6.565c7.993-19.032,13.035-30.166,15.131-33.403c13.322-21.698,31.023-38.734,53.103-51.106
            c22.082-12.371,45.873-18.559,71.376-18.559c38.261,0,71.473,13.039,99.645,39.115l-39.406,39.397
            c-3.607,3.617-5.421,7.902-5.421,12.851c0,4.948,1.813,9.231,5.421,12.847c3.621,3.617,7.905,5.424,12.854,5.424h127.906
            c4.949,0,9.233-1.807,12.848-5.424c3.613-3.616,5.42-7.898,5.42-12.847V36.542C438.529,31.593,436.733,27.312,433.109,23.694z"/>
        <path d="M422.253,255.813h-54.816c-4.188,0-7.043,2.187-8.562,6.566c-7.99,19.034-13.038,30.163-15.129,33.4
            c-13.326,21.693-31.028,38.735-53.102,51.106c-22.083,12.375-45.874,18.556-71.378,18.556c-18.461,0-36.259-3.423-53.387-10.273
            c-17.13-6.858-32.454-16.567-45.966-29.13l39.115-39.112c3.615-3.613,5.424-7.901,5.424-12.847c0-4.948-1.809-9.236-5.424-12.847
            c-3.617-3.62-7.898-5.431-12.847-5.431H18.274c-4.952,0-9.235,1.811-12.851,5.431C1.807,264.844,0,269.132,0,274.08v127.907
            c0,4.945,1.807,9.232,5.424,12.847c3.619,3.61,7.902,5.428,12.851,5.428c4.948,0,9.229-1.817,12.847-5.428l36.829-36.833
            c20.367,19.41,43.542,34.355,69.523,44.823c25.981,10.472,52.866,15.701,80.653,15.701c52.155,0,97.643-15.845,136.471-47.534
            c38.828-31.688,64.333-73.042,76.52-124.05c0.191-0.38,0.281-1.047,0.281-1.995c0-2.478-0.907-4.612-2.715-6.427
            C426.874,256.72,424.731,255.813,422.253,255.813z"/>
    </g>
</g>
</svg>

这是我当前使用的几何形状定义的示例:

This is an example of the Geometry shape definition i'm currently using:

<Geometry x:Key="RefreshIcon">
        M19.85228,12.08996L12.093,19.849201 24.242323,31.997846 12.094,44.145998 19.852051,51.904958 32.001186,39.756277 44.150543,51.904958 51.909,44.145994 39.760246,31.997501 51.909,19.849201 44.15049,12.08996 32.001431,24.238849z M32,0C49.671021,3.1599484E-07 64,14.329407 64,31.998501 64,49.677606 49.671021,63.997003 32,63.997003 14.328003,63.997003 0,49.677606 0,31.998501 0,14.329407 14.328003,3.1599484E-07 32,0z
    </Geometry>

推荐答案

我个人使用 Inkscape 打开SVG 并简单地将它们另存为 Microsoft .XAML.我用你的试试，它给了我 PathGeometry 定义:

I personally use Inkscape to open up SVG's and simply save them as Microsoft .XAML. I tried it with yours, it gave me PathGeometry definitions:

<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path7" Fill="#000000">
      <Path.Data>
        <PathGeometry Figures="M433.109 23.694c-3.614-3.612-7.898-5.424-12.848-5.424c-4.948 0-9.226 1.812-12.847 5.424l-37.113 36.835             c-20.365-19.226-43.684-34.123-69.948-44.684C274.091 5.283 247.056 0.003 219.266 0.003c-52.344 0-98.022 15.843-137.042 47.536             C43.203 79.228 17.509 120.574 5.137 171.587v1.997c0 2.474 0.903 4.617 2.712 6.423c1.809 1.809 3.949 2.712 6.423 2.712h56.814             c4.189 0 7.042-2.19 8.566-6.565c7.993-19.032 13.035-30.166 15.131-33.403c13.322-21.698 31.023-38.734 53.103-51.106             c22.082-12.371 45.873-18.559 71.376-18.559c38.261 0 71.473 13.039 99.645 39.115l-39.406 39.397             c-3.607 3.617-5.421 7.902-5.421 12.851c0 4.948 1.813 9.231 5.421 12.847c3.621 3.617 7.905 5.424 12.854 5.424h127.906             c4.949 0 9.233-1.807 12.848-5.424c3.613-3.616 5.42-7.898 5.42-12.847V36.542C438.529 31.593 436.733 27.312 433.109 23.694z" FillRule="NonZero"/>
      </Path.Data>
    </Path>
    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path9" Fill="#000000">
      <Path.Data>
        <PathGeometry Figures="M422.253 255.813h-54.816c-4.188 0-7.043 2.187-8.562 6.566c-7.99 19.034-13.038 30.163-15.129 33.4             c-13.326 21.693-31.028 38.735-53.102 51.106c-22.083 12.375-45.874 18.556-71.378 18.556c-18.461 0-36.259-3.423-53.387-10.273             c-17.13-6.858-32.454-16.567-45.966-29.13l39.115-39.112c3.615-3.613 5.424-7.901 5.424-12.847c0-4.948-1.809-9.236-5.424-12.847             c-3.617-3.62-7.898-5.431-12.847-5.431H18.274c-4.952 0-9.235 1.811-12.851 5.431C1.807 264.844 0 269.132 0 274.08v127.907             c0 4.945 1.807 9.232 5.424 12.847c3.619 3.61 7.902 5.428 12.851 5.428c4.948 0 9.229-1.817 12.847-5.428l36.829-36.833             c20.367 19.41 43.542 34.355 69.523 44.823c25.981 10.472 52.866 15.701 80.653 15.701c52.155 0 97.643-15.845 136.471-47.534             c38.828-31.688 64.333-73.042 76.52-124.05c0.191-0.38 0.281-1.047 0.281-1.995c0-2.478-0.907-4.612-2.715-6.427             C426.874 256.72 424.731 255.813 422.253 255.813z" FillRule="NonZero"/>
      </Path.Data>
    </Path>

编辑我不确定您是否绝对需要 Geometry 对象(PathGeometry 是用于更复杂形状的 Geometry 类型)，但我认为对于刷新箭头的形状，您需要 PathGeometry 对象.

Edit I'm not sure if you absolutely require Geometry objects (PathGeometry is type of Geometry that's for more complex shapes), but I think for the shapes for your refresh arrows you need PathGeometry objects.

Edit2 感谢 Clemens，您显然可以从上面连接两个 PathGeometry 字符串:

Edit2 Thanks to Clemens, you can apparently concat the two PathGeometry strings from above:

            <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#000000">
                <Path.Data>
                    <PathGeometry Figures="M433.109 23.694c-3.614-3.612-7.898-5.424-12.848-5.424c-4.948 0-9.226 1.812-12.847 5.424l-37.113 36.835             c-20.365-19.226-43.684-34.123-69.948-44.684C274.091 5.283 247.056 0.003 219.266 0.003c-52.344 0-98.022 15.843-137.042 47.536             C43.203 79.228 17.509 120.574 5.137 171.587v1.997c0 2.474 0.903 4.617 2.712 6.423c1.809 1.809 3.949 2.712 6.423 2.712h56.814             c4.189 0 7.042-2.19 8.566-6.565c7.993-19.032 13.035-30.166 15.131-33.403c13.322-21.698 31.023-38.734 53.103-51.106             c22.082-12.371 45.873-18.559 71.376-18.559c38.261 0 71.473 13.039 99.645 39.115l-39.406 39.397             c-3.607 3.617-5.421 7.902-5.421 12.851c0 4.948 1.813 9.231 5.421 12.847c3.621 3.617 7.905 5.424 12.854 5.424h127.906             c4.949 0 9.233-1.807 12.848-5.424c3.613-3.616 5.42-7.898 5.42-12.847V36.542C438.529 31.593 436.733 27.312 433.109 23.694zM422.253 255.813h-54.816c-4.188 0-7.043 2.187-8.562 6.566c-7.99 19.034-13.038 30.163-15.129 33.4             c-13.326 21.693-31.028 38.735-53.102 51.106c-22.083 12.375-45.874 18.556-71.378 18.556c-18.461 0-36.259-3.423-53.387-10.273             c-17.13-6.858-32.454-16.567-45.966-29.13l39.115-39.112c3.615-3.613 5.424-7.901 5.424-12.847c0-4.948-1.809-9.236-5.424-12.847             c-3.617-3.62-7.898-5.431-12.847-5.431H18.274c-4.952 0-9.235 1.811-12.851 5.431C1.807 264.844 0 269.132 0 274.08v127.907             c0 4.945 1.807 9.232 5.424 12.847c3.619 3.61 7.902 5.428 12.851 5.428c4.948 0 9.229-1.817 12.847-5.428l36.829-36.833             c20.367 19.41 43.542 34.355 69.523 44.823c25.981 10.472 52.866 15.701 80.653 15.701c52.155 0 97.643-15.845 136.471-47.534             c38.828-31.688 64.333-73.042 76.52-124.05c0.191-0.38 0.281-1.047 0.281-1.995c0-2.478-0.907-4.612-2.715-6.427             C426.874 256.72 424.731 255.813 422.253 255.813z" FillRule="NonZero"/>
                </Path.Data>
            </Path>

这篇关于将多路径 SVG 转换为几何图形到 WPF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！