Blazor与纯HTML/CSS中SVG渲染差异问题排查求助

我是Web开发新手，目前遇到SVG渲染异常问题：在Blazor和纯HTML/CSS中使用完全相同的代码，同一浏览器内呈现效果却不一致。纯HTML/CSS中的SVG尺寸符合要求，但Blazor中的SVG尺寸异常，想确认这是Blazor的Bug还是我的操作有误。

复现代码 #

纯HTML/CSS代码 #

CSS样式

.square,
.select-all-button {
  width: 45px;
  height: 45px;
  display: flex;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-right: 10px;
  justify-content: center;
  align-items: center;
}

.square {
  border: 1px solid #ddd;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
}

.row {
  display: flex;
  margin-bottom: 20px;
}

HTML结构

<body>
  <div class="row">
    <div class="square ">1</div>
    <div class="square ">2</div>
    <div class="square ">3</div>
    <div class="square ">4</div>
    <div class="square ">5</div>

    <div class="select-all-button">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.496 5.627A2.25 2.25 0 0 1 22 7.75v10A4.25 4.25 0 0 1 17.75 22h-10a2.25 2.25 0 0 1-2.123-1.504l2.097.004H17.75a2.75 2.75 0 0 0 2.75-2.75v-10l-.004-.051V5.627ZM17.246 2a2.25 2.25 0 0 1 2.25 2.25v12.997a2.25 2.25 0 0 1-2.25 2.25H4.25A2.25 2.25 0 0 1 2 17.247V4.25A2.25 2.25 0 0 1 4.25 2h12.997ZM13.47 7.47l-3.89 3.888-.98-1.308a.75.75 0 1 0-1.2.9l1.5 2a.75.75 0 0 0 1.13.08l4.5-4.5a.75.75 0 0 0-1.06-1.06Z" fill="#212121"/>
        </svg>
    </div>
  </div>
</body>

Blazor代码 #

<div class="row">
    @for (var i = 1; i < 7; i++)
    {
        <div class="square"> @i </div>
    }

        <div class="select-all-button">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.496 5.627A2.25 2.25 0 0 1 22 7.75v10A4.25 4.25 0 0 1 17.75 22h-10a2.25 2.25 0 0 1-2.123-1.504l2.097.004H17.75a2.75 2.75 0 0 0 2.75-2.75v-10l-.004-.051V5.627ZM17.246 2a2.25 2.25 0 0 1 2.25 2.25v12.997a2.25 2.25 0 0 1-2.25 2.25H4.25A2.25 2.25 0 0 1 2 17.247V4.25A2.25 2.25 0 0 1 4.25 2h12.997ZM13.47 7.47l-3.89 3.888-.98-1.308a.75.75 0 1 0-1.2.9l1.5 2a.75.75 0 0 0 1.13.08l4.5-4.5a.75.75 0 0 0-1.06-1.06Z" fill="#212121"/>
            </svg>
        </div>
</div>

渲染效果对比 #

• 纯HTML/CSS：SVG尺寸适配45x45的父容器，显示正常
• Blazor：SVG尺寸未适配父容器，呈现异常大小

开发者工具排查信息 #

Blazor代码元素检查结果 #

1. 父容器.select-all-button宽高为45px，但SVG元素未被约束，宽高超出预期
2. SVG元素未继承父容器的flex布局缩放规则

纯HTML/CSS代码元素检查结果 #

1. SVG元素自动适配父容器45px的宽高，大小正常
2. SVG元素受父容器align-items: center和justify-content: center约束，居中显示

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