内嵌SVG可正常缩放，独立文件引用后无法缩放的技术问询

问题背景 #

SVG嵌入HTML时可正常缩放，但存为独立文件通过<img>或<object>引用时无法缩放。对比正常缩放的SVG文件，发现自身SVG标签属性差异明显：

我的SVG标签：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewbox="0 0 250 182.6" style="enable-background:new 0 0 250 182.6;" xml:space="preserve">

可正常缩放的SVG标签：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 55" >

尝试移除冗余属性后浏览器无法显示图像，且为实现JS动态修改颜色添加了CSS变量，父flex容器已设置min-height: 0。

核心修复方案 #

1. 修正viewbox大小写错误 #

SVG规范中属性名为**viewBox**（驼峰式，B大写），小写的viewbox不会被浏览器识别为标准视图边界属性，这是缩放失效的核心原因。修改后标签示例：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 250 182.6" style="enable-background:new 0 0 250 182.6;" xml:space="preserve">

2. 清理冗余属性（可选） #

部分属性对缩放无影响，可安全移除简化结构：

• x="0px" y="0px"：默认值即为0，无需显式设置
• xml:space="preserve"：仅影响文本空格，无特殊文本需求可移除
• style="enable-background:new 0 0 250 182.6;"：旧版属性，现代浏览器已无需使用

简化后标签：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" viewBox="0 0 250 182.6">

3. 给<object>添加尺寸样式 #

确保<object>能继承父容器空间，添加以下CSS：

#crest {
  width: 100%;
  height: 100%;
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: 3;
  animation-timing-function: linear;
}

4. 修复SVG内部样式的注释错误 #

SVG内<style>中的嵌套注释会导致样式解析异常，修改为：

<style>
<![CDATA[
    .st1{fill:var(--coa-bg-color);}
    .st2{fill:var(--coa-bg-color);fill-rule:evenodd;clip-rule:evenodd}
    .st3{fill:none;stroke:var(--coa-bg-color);stroke-width:1.78}
    .st5{fill:none;stroke:var(--coa-bg-color);stroke-width:.45}
    .st6{fill:none;stroke:var(--coa-bg-color);stroke-width:.67}
    .st7{fill:none;stroke:var(--coa-bg-color);stroke-width:.45;stroke-miterlimit:5}
]]>
</style>

验证步骤 #

1. 修正SVG文件中的viewbox为viewBox
2. 清理SVG内部样式的错误注释
3. 给<object>添加width:100%;height:100%;样式
4. 重新引用SVG文件，测试缩放效果

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