UWP中C#修改SVG属性后设置为Image源的显示异常求助

问题核心在于SvgImageSource需要明确的渲染尺寸，但直接使用SVG根元素的原始宽高会因为屏幕DPI或控件尺寸不匹配导致模糊；而不指定尺寸时，若SVG缺少viewBox属性，控件无法确定渲染范围，导致不显示。

解决步骤： #

1. 确保SVG包含viewBox属性
   viewBox是SVG自适应缩放的核心，它定义了图形的坐标边界，让SVG可以根据容器尺寸缩放。如果你的SVG根元素没有viewBox，可通过代码添加：

   var svgRoot = svgDocument.Root;
   if (svgRoot.Attribute("viewBox") == null)
   {
       // 从现有width/height提取值，假设是像素单位
       var width = svgRoot.Attribute("width")?.Value;
       var height = svgRoot.Attribute("height")?.Value;
       if (!string.IsNullOrEmpty(width) && !string.IsNullOrEmpty(height))
       {
           // 移除单位（比如"200px"转为"200"）
           float w = float.Parse(width.Replace("px", ""));
           float h = float.Parse(height.Replace("px", ""));
           svgRoot.SetAttributeValue("viewBox", $"0 0 {w} {h}");
       }
   }
   

2. 根据控件实际尺寸和DPI设置渲染像素宽高
   不要用SVG原始的小尺寸，而是获取Image控件的实际显示尺寸，再乘以屏幕的DPI缩放系数，确保渲染的像素密度匹配屏幕，避免模糊：

   using (MemoryStream memoryStream = new MemoryStream())
   {
       svgDocument.Save(memoryStream);
       memoryStream.Position = 0;
   
       SvgImageSource svgImage = new SvgImageSource();
       
       // 获取屏幕DPI缩放系数
       var dpiScale = DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;
       // 获取Image控件的实际显示尺寸（确保控件已加载，ActualWidth/Height有值）
       int renderWidth = (int)(SVGImage2.ActualWidth * dpiScale);
       int renderHeight = (int)(SVGImage2.ActualHeight * dpiScale);
   
       // 确保尺寸不为0（控件未加载时可以用默认值，比如SVG原始尺寸*DPI）
       if (renderWidth == 0 || renderHeight == 0)
       {
           var widthAttr = svgDocument.Root.Attribute("width");
           var heightAttr = svgDocument.Root.Attribute("height");
           if (widthAttr != null && heightAttr != null)
           {
               float w = float.Parse(widthAttr.Value.Replace("px", ""));
               float h = float.Parse(heightAttr.Value.Replace("px", ""));
               renderWidth = (int)(w * dpiScale);
               renderHeight = (int)(h * dpiScale);
           }
           else
           {
               // 兜底默认尺寸
               renderWidth = 400;
               renderHeight = 300;
           }
       }
   
       svgImage.RasterizePixelWidth = renderWidth;
       svgImage.RasterizePixelHeight = renderHeight;
   
       await svgImage.SetSourceAsync(memoryStream.AsRandomAccessStream());
       SVGImage2.Source = svgImage;
   }
   

3. 额外优化：监听控件尺寸变化
   如果Image控件的尺寸会动态变化（比如窗口缩放），可以监听SizeChanged事件，重新渲染SVG：

   // 在页面构造或控件加载时注册事件
   SVGImage2.SizeChanged += SVGImage2_SizeChanged;
   
   // 事件处理方法
   private async void SVGImage2_SizeChanged(object sender, SizeChangedEventArgs e)
   {
       // 重新执行修改SVG并设置源的逻辑（建议把逻辑封装成独立方法）
       await UpdateSvgSource();
   }
   

关键说明： #

• viewBox是SVG自适应的基础，没有它，SvgImageSource无法正确缩放图形。
• 使用RawPixelsPerViewPixel确保渲染的像素数匹配屏幕DPI，避免高分辨率屏幕下模糊。
• 优先使用控件的ActualWidth/ActualHeight，保证SVG渲染尺寸和控件显示尺寸一致。

内容的提问来源于stack exchange，提问作者Deepak Ganesan