logo标签列表

将多路径SVG转换为几何图形以适用于WPF。

c#wpfsvg
11

我有一些图标想要在我的WPF应用程序中使用，但是我需要它们成为几何对象，我该如何将SVG转换为几何对象呢？或者说几何形状不允许由多个路径组成的复杂形状吗？

这是SVG数据，这样你就可以看到我在处理什么：

<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>

这是我目前正在使用的几何形状定义的示例：

<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>
你甚至都没有尝试将两个SVG路径字符串放入一个几何体中吗？ - Clemens
没想到会起作用 @Clemens - Martyn Ball
2个回答
20

我个人使用Inkscape打开SVG文件，然后将它们简单地保存为Microsoft .XAML格式。我尝试了您的文件，它给了我PathGeometry定义：

<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>

编辑 我不确定您是否绝对需要几何对象（PathGeometry是一种用于更复杂形状的几何体），但我认为对于刷新箭头的形状，您需要PathGeometry对象。

编辑2 感谢Clemens的提示，您显然可以将上面两个PathGeometry字符串连接起来：

            <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>
7
或者只需连接这两个路径字符串，例如 <Path ... Data="M...zM...z"/>。 - Clemens
@Clemens 有趣！我个人从未深入理解SVG路径定义与XAML之间的区别。可能是因为当我开始使用Inkscape时，我已经被它惯坏了。 - Rowbear
谢谢，我回家后会尝试这段代码。没想到你可以将所有路径组合成一个字符串。 - Martyn Ball
1
@Dimi 这个链接应该会有所帮助：https://dev59.com/I0_Ta4cB1Zd3GeqPD87q - Rowbear
0

InkScape对于我的一些SVG文件（大约40个带有样式的路径）无法正常工作，我正在使用最新版本，而复杂的SVG被转换为整个黑色形状。

我在其他相关答案中找到了一个工具（Ab2d.ReaderSvg），它看起来比InkScape好得多在此下载。它可以正确地将复杂的SVG转换为XAML，但是如果没有许可证版本，则无法导出，您应该取消右侧选项中的“预览使用许可版本”，然后导出XAML。

还有一件事情需要做的是找到像这样的部分<Path Fill="Gray"...，删除Fill="Gray"部分并添加内部Brush部分，参考其他生成的Path部分，并填写正确的颜色，以使SVG文件呈现正确。因为似乎这个应用程序会随机将某些部分变成灰色，以供未经许可的版本使用。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接