尽管高度和宽度要求相同，但XAML中的两个SVG元素显示不同的大小

Question

我在xamarin中使用this插件显示以下XAML来显示SVG文件。第二张图像比第一张图片大得多。我相信它与SVG文件中的缩放有关吗？我无法直接设置height或width，因为它们是read-only in this binding。我该如何解决这个问题？

<abstractions:SvgImage Grid.Row="2" Grid.Column="1" SvgAssembly="{Binding SvgAssembly}" SvgPath="{Binding Facebook_Round}" HeightRequest="50" WidthRequest="50" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<abstractions:SvgImage Grid.Row="2" Grid.Column="2" SvgAssembly="{Binding SvgAssembly}" SvgPath="{Binding Google_Round}" HeightRequest="50" WidthRequest="50" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />

SVG Facebook First Tag：

<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" height="300" width="300" version="1.1" fill-opacity="0"> xml:space="preserve">

SVG Google First Tag：

<?xml version="1.0"?><svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 486.392 486.392" width="300" height="300" >

Answer 1

在width代码上设置height和svg CSS 属性会将其缩小或缩小到任意大小。

在您的特定情况下，差异是由Google代码的viewbox属性创建的：viewBox="0 0 486.392 486.392"。

但是，您应该将svg包装在某个容器中并应用：

，而不是将其删除。

.someContainer svg {
    width: 3em;
    height: 3em;
}

当然，3em只是一个例子。重要的部分是 path s将被缩放以适合svg元素的CSS维度。大多数情况下，您只应指定一个尺寸以避免扭曲：水平对齐时height或形成列时width。