logo标签列表

如何在UWP的XAML中拉伸/调整SVG大小？

c#xamlsvguwp
12

自创始人更新发布以来，UWP可以使用SVG图片，如此处(第3分钟)所述。

我有一个48x48的SVG，如果我将图像的宽度和高度设置为48并且拉伸设置为无限，则可以正常使用：

<Image Source="ms-appx:///Assets//check.svg" Height="48" Width="48" Stretch="None"/>

如果我将拉伸设置为充满，则图像会消失。 如果我增加宽度和高度，我可以看到图标被钉在图像的左上角（屏幕截图使用不同的SVG但相同大小）。 拉伸=填充和固定高度/宽度不是缩放图像的预期方式吗？

在我看来，拉伸算法似乎没有意识到我的SVG应该是48x48。我做错了吗，还是有解决方法？

我以为 Image.Source 需要 BitmapImage 类，所以我会觉得它将 SVG 渲染为光栅位图。这意味着你可能需要将 Image 包装在 ViewBox 中，或者个人认为我只是使用类似于 SVG 的 XAML Path 标记，您可以从 Adobe Illustrator 导出到该格式。我之前没有听说过 SVG 支持，甚至文档中也没有提到，但如果它被完全支持，那将是很酷的。 - Chris W.
5个回答
17
9
我整个上午都遇到同样的问题，准备完全放弃Svg支持，似乎很疯狂，无法正确缩放可伸缩格式……
但是，我又尝试了一次，我想我已经解决了这个问题。
似乎需要告诉SvgImageSource在SVG的原始设计大小处进行光栅化，然后获取Image来缩放它。不确定这是否是特别有用的方法，但肯定可以在版本15063中解决该问题。
<Image Width="24" Stretch="Uniform" VerticalAlignment="Center">
  <Image.Source>
    <SvgImageSource UriSource="ms-appx:///Assets/salesorder.folder.plain.svg"
                    RasterizePixelHeight="48"
                    RasterizePixelWidth="48" />
  </Image.Source>
</Image>

因此，如果SVG的尺寸为48x48，则使用RasterizePixelHeight和RasterizePixelWidth值将其转换为48x48的位图，然后将图像缩放为24x24。
希望这可以帮助您。
更新： 我刚刚重新阅读了您的问题，并意识到您正在寻找增加比例的方法，而我一直在努力减小比例。看起来技术仍然有效，但是随着您的缩放，由于位图缩放过程，您将失去任何图像的清晰度。我认为这指向了当前实现中的一个基本缺陷。他们似乎正在将svg渲染为位图，我们必须告诉它原始大小才能使其正确渲染，然后他们允许位图代码完成其余工作。
我认为这是否是真正的支持还有些争议，或者是一个奇怪的折衷方案。有人建议Adobe Illustrator可以生成XAML路径，我想我会研究一下，看看是否可以获得更好的质量输出，可惜因为我真的很喜欢Inkscape :-(。
这是纯金。 - Zodman
有趣的是，如果您不设置RasterizePixelWidth/Height并依赖于图像的宽度/高度，则当显示器的DPI更改时，图像将调整大小。 在使用SVG时，应始终定义RasterizePixelWidth/Height以避免此问题。 - Zodman
8
对我来说，这个方法可以修改SVG文件：

  1. 在svg标记中添加适当的preserveAspectRatio属性。 对于我来说，它是"xMinYMin meet"。
  2. 将svg标记的viewbox属性设置为此模板"0 0 ActualHeight ActualWidth"， 在我的情况下，它是"0 0 1050 805"。
  3. 将svg标记的height和width设置为"auto"。现在，svg元素相对于您在XAML页面或视图中提供的Height，Width和Stretch属性。
  4. 可能需要重新构建项目才能使XAML Designer生效。

SVG文件:

<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1050 805" width="auto" height="auto" ... > ... </svg>

XAML文件：

<Image
    Width="200"
    Source="ms-appx:///Assets/Photos/Illustrations/sample.svg"
    Stretch="UniformToFill" />
2
结果对我来说，我只需要使用viewBox属性。我将其设置为svg图像中的值（将<svg height="45" width"45">更改为<svg viewBox="0 0 45 45">）。 - ghord
这比被批准的答案更好。如果您有200％的比例，并且SVG图像显示出需要的尺寸的一小部分，RasterizePixelHeight将会将小图像转换为位图，然后再进行扩展，这会降低质量。 - GeorgiG
使用 preserveAspectRatio="xMinYMin" width="auto" height="auto"，同时保留原始视口，足以使SVG正确缩放以填充我的图像元素，并为显示器的任何DPI提供适当的光栅化。 - Monroe Thomas
2

对我来说，只有当您将RasterizePixelHeight和RasterizePixelWidth设置为SVG原始分辨率（例如，在Inkscape中的文档属性）时，它才起作用。

2

对我来说，在不设置那些属性的情况下也可以工作，但是需要在<svg ...>标签中添加preserveAspectRatio="xMinYMin"，并从<svg ...>标签中删除width和height。

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