如何使用具有多个路径的 Svg 图像

编程问答 2022-08-07

问题描述

为了测试，我使用 InkScape 创建了以下 svg 文件，该文件可以在所有主要浏览器（IE、Chrome、Edge、FireFox 等）中正确显示图像 TEX。现在我想将其显示为 WPF 应用程序上按钮的图标。您可能已经注意到 svg 文件有多个路径。我尝试在 WPF 按钮中使用这些多个路径，如下所示，但它没有显示图像 TEX。 问题：我们如何在 Paths 应用中使用多个 WPF svg 图像。如何使用以下 svg 文件在 WPF 应用中显示按钮图标？

WPF 按钮 [不显示 svg 图标]

<Button Width="36" Height="36" ToolTip="Test for svg image">
    <ViewBox>
       <Grid>
            <Path Data="M 65.210466,41.41868 H 62.80752 V 47.625 h -1.984369 v -6.20632 h -2.402946 v -1.488276 h 6.790261 z"/>
            <Path Data="m 71.969722,47.625 h -5.565534 v -7.694596 h 5.565534 v 1.488276 h -3.591501 v 1.32808 h 3.33312 v 1.488277 h -3.33312 v 1.901686 h 3.591501 z"/>
            <Path Data="M 80.609994,47.625 H 78.315568 L 76.65676,45.092863 74.966946,47.625 h -2.191074 l 2.728507,-3.87572 -2.671663,-3.818876 h 2.289258 l 1.601965,2.397779 1.648473,-2.397779 h 2.196241 l -2.687166,3.741362 z"/>
       </Grid>
    </ViewBox>
</Button>

svg 文件：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-Syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="22.189789mm"
   height="7.6945963mm"
   viewBox="0 0 22.189789 7.6945963"
   version="1.1"
   id="svg45"
   inkscape:version="1.0.1 (3bc2e813f5,2020-09-07)"
   sodipodi:docname="drawing-1_plain_Path.svg">
  <defs
     id="defs39" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="-307.94363"
     inkscape:cy="409.08194"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     inkscape:document-rotation="0"
     showgrid="false"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     inkscape:window-width="1366"
     inkscape:window-height="705"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <Metadata
     id="Metadata42">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </Metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-58.420205,-39.930404)">
    <g
       aria-label="TEX"
       id="text49"
       style="font-weight:bold;font-size:10.5833px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';stroke-width:0.264583"
       inkscape:export-xdpi="96"
       inkscape:export-ydpi="96">
      <path
         d="M 65.210466,41.41868 H 62.80752 V 47.625 h -1.984369 v -6.20632 h -2.402946 v -1.488276 h 6.790261 z"
         style="stroke-width:0.264583"
         id="path60" />
      <path
         d="m 71.969722,47.625 h -5.565534 v -7.694596 h 5.565534 v 1.488276 h -3.591501 v 1.32808 h 3.33312 v 1.488277 h -3.33312 v 1.901686 h 3.591501 z"
         style="stroke-width:0.264583"
         id="path62" />
      <path
         d="M 80.609994,3.741362 z"
         style="stroke-width:0.264583"
         id="path64" />
    </g>
  </g>
</svg>

解决方法

您可以使用名为 SvgToXaml 的工具将 svg 转换为 xaml，您可以使用 SvgToXaml 生成的 xaml 中的资源。

生成的xaml和使用它的代码附在下面：

<Button>
        <Button.Resources>
            <Geometry x:Key="iconGeometry1">F1 M22.189789,7.6945963z M0,0z M65.210466,41.41868L62.80752,41.41868 62.80752,47.625 60.823151,41.41868 58.420205,39.930404 65.210466,39.930404z</Geometry>
            <Geometry x:Key="iconGeometry2">F1 M22.189789,0z M71.969722,47.625L66.404188,47.625 66.404188,39.930404 71.969722,41.41868 68.378221,42.74676 71.711341,44.235037 68.378221,46.136723 71.969722,46.136723z</Geometry>
            <Geometry x:Key="iconGeometry3">F1 M22.189789,0z M80.609994,47.625L78.315568,47.625 76.65676,45.092863 74.966946,47.625 72.775872,47.625 75.504379,43.74928 72.832716,39.930404 75.121974,39.930404 76.723939,42.328183 78.372412,39.930404 80.568653,39.930404 77.881487,43.671766z</Geometry>
            <DrawingGroup x:Key="iconDrawingGroup" ClipGeometry="M0,0 V7.6945963 H22.189789 V0 H0 Z">
                <DrawingGroup Opacity="1" Transform="1,1,-58.420205,-39.930404">
                    <DrawingGroup Opacity="1">
                        <GeometryDrawing Brush="#FF000000" Geometry="{StaticResource iconGeometry1}" />
                        <GeometryDrawing Brush="#FF000000" Geometry="{StaticResource iconGeometry2}" />
                        <GeometryDrawing Brush="#FF000000" Geometry="{StaticResource iconGeometry3}" />
                    </DrawingGroup>
                </DrawingGroup>
            </DrawingGroup>
        </Button.Resources>
        <Image>
            <Image.Source>
                <DrawingImage Drawing="{StaticResource iconDrawingGroup}" />
            </Image.Source>
        </Image>
    </Button>
,

您的 SVG 包含一个带有 transform 属性的外部组：

<g
   inkscape:label="Layer 1"
   inkscape:groupmode="layer"
   id="layer1"
   transform="translate(-58.420205,-39.930404)">

如果不对您的 WPF 内容使用此转换，则路径只是在可视区域之外。

在 Inkscape 中解析变换有点棘手，因为 Inkscape UI 隐藏了这个组，将其重命名为“层”。你需要

  • 确保在首选项中选择了行为 -> 转换 -> 存储转换：优化
  • 打开 XML 编辑器
  • 选择带有 <svg:g> 的 id="layer1" 元素
  • 删除属性inkscape:groupmode
  • 然后，在图形用户界面中，您可以取消对所选组的分组（两次，也可以取消对内部组的分组）

这将重写应用翻译的各个路径，以便您可以在 WPF 按钮中使用它们。

pathgeometrysvgsvgsvgwpfwpfwpf