关于xaml：在UWP应用程序中显示的SVG图像被涂黑


SVG images shown blacked out in UWP application

我和我的团队正在尝试在我们的UWP win10应用程序中放置一些.svg图标(目标版本和最低版本是Windows 10 Fall Creators更新)。

在资源文件中，我定义了SvgImageSource，如下所示：

1
<SvgImageSource x:Key="PencilIcon" UriSource="Images/DeviceMenu/Icon_EditMode_grey.svg" />

然后我在组件中继续使用此图像源：

1
<Image Source="{StaticResource PencilIcon}" />

我尝试了几种不同的svg，它们都以正确的形状进行渲染，但是都是黑色的(第一个是铅笔)：

enter image description here

原始svg如下所示：

enter image description here

这是SVG的源代码

我尝试调整"拉伸"，"宽度"，"高度"等，但似乎无法正常工作。

UWP不知道CSS样式是什么。
就我而言，是这样的：

1
2
3
4
5
6
7
8
9
10
<style
     type="text/css"
     id="style2">
    .st0{fill:#996459;}
    .st1{fill:#FFFFFF;}
    .st2{fill:#B4B6BC;}
    .st3{fill:#5C546A;}
    .st4{fill:#868491;}
    .st5{fill:#0F4499;}
</style>

要为UWP解决此问题，请找到每个class =" ..."并手动应用样式。

如果插图画家
使用样式："演示文稿属性" enter image description here

这是Adobe Illustrator的一个已知问题，请尝试使用其SVG导出设置。

相关讨论

如果您使用illustrator，请尝试更改样式。它应该类似于样式属性。
enter image description here

UWP仅部分支持SVG Ver 1.1规范(请参阅SVG支持)

而且它不支持类似CSS的样式。

查看图片

如果使用Adobe Illustrator导出图像，则可以使用导出设置进行播放：AI导出设置

或手动设置：请参见图片

或使用我的工具：

  • 市场上的Visual Studio扩展。
  • Github的桌面版本

此工具只是将CSS样式直接内联到svg元素。