在Avalonia v11.0.6中使用FluentAvalonia渲染SVG图标遇问题求助

在使用FluentAvalonia v2.0.5搭配Avalonia v11.0.6时，通过<ui:FAPathIcon>组件引入SVG路径数据，原SVG中fill="none"，但实际渲染时路径内部被填充，无法得到预期的线条图标效果。

原素材信息 #

示例SVG代码 #

<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.3101 16H16.3101M12.3101 16H5.31006C4.77963 16 4.27092 15.7893 3.89584 15.4142C3.52077 15.0391 3.31006 14.5304 3.31006 14V6C3.31006 5.46957 3.52077 4.96086 3.89584 4.58579C4.27092 4.21071 4.77963 4 5.31006 4H19.3101C19.8405 4 20.3492 4.21071 20.7243 4.58579C21.0993 4.96086 21.3101 5.46957 21.3101 6V8.24454M12.3101 16V20M12.3101 20H16.3101M12.3101 20H8.31006" stroke="#202020" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

原使用代码 #

xmlns:ui="using:FluentAvalonia.UI.Controls"   

<ui:FAPathIcon Data="M12.3101 16H16.3101M12.3101 16H5.31006C4.77963 16 4.27092 15.7893 3.89584 15.4142C3.52077 15.0391 3.31006 14.5304 3.31006 14V6C3.31006 5.46957 3.52077 4.96086 3.89584 4.58579C4.27092 4.21071 4.77963 4 5.31006 4H19.3101C19.8405 4 20.3492 4.21071 20.7243 4.58579C21.0993 4.96086 21.3101 5.46957 21.3101 6V8.24454M12.3101 16V20M12.3101 20H16.3101M12.3101 20H8.31006" />

效果对比 #

• 预期效果：仅显示黑色线条的图标，路径无填充区域
• 实际效果：路径内部被填充为实心，与线条图标样式不符

解决方案 #

<ui:FAPathIcon>默认会应用填充样式，需要显式设置Fill="None"（或Fill="Transparent"）禁用填充，同时补充原SVG中的线条属性，完全复现原图标样式：

xmlns:ui="using:FluentAvalonia.UI.Controls"   

<ui:FAPathIcon 
    Data="M12.3101 16H16.3101M12.3101 16H5.31006C4.77963 16 4.27092 15.7893 3.89584 15.4142C3.52077 15.0391 3.31006 14.5304 3.31006 14V6C3.31006 5.46957 3.52077 4.96086 3.89584 4.58579C4.27092 4.21071 4.77963 4 5.31006 4H19.3101C19.8405 4 20.3492 4.21071 20.7243 4.58579C21.0993 4.96086 21.3101 5.46957 21.3101 6V8.24454M12.3101 16V20M12.3101 20H16.3101M12.3101 20H8.31006" 
    Fill="None"
    Stroke="#202020"
    StrokeWidth="2"
    StrokeLineCap="Round"
    StrokeLineJoin="Round" />

原理说明 #

FAPathIcon的默认样式不会自动继承SVG的fill="none"属性，而是使用控件默认的填充规则。通过显式设置Fill="None"强制禁用填充，同时补充原SVG定义的线条属性（Stroke、StrokeWidth等），即可得到和原SVG一致的线条图标效果。

内容的提问来源于stack exchange，提问作者Alexander Zhyshkevich