通过<object>引入的外部SVG CSS修改高度无响应问题求助

• SVG 根元素属于替换元素，你仅设置了height属性，没有配套设置width属性或显式声明width: auto，浏览器计算独立外部 SVG 文档的尺寸时，会因为缺少宽高映射规则，默认将宽度判定为0，高度同步被压缩为0，最终得到0x0的渲染结果。
• 如果你是通过SVG内部关联的CSS文件加载规则，需要确认CSS文件的相对路径正确：路径是相对于SVG文件的存储位置计算，而非相对于引入该SVG的HTML文件路径，路径错误会导致CSS规则无法加载到SVG文档内，自然不会生效。
• 如果你是在HTML中通过<img>标签引入该SVG，且将类名加在了<img>标签上，那么SVG内部关联的CSS不会作用到外层的img元素，同时如果img标签存在内联的width/height属性，优先级会高于CSS规则，也会导致样式不生效。

根据你的使用场景选择对应方案即可：

1. 如果你是直接在HTML内联使用该SVG，或是通过内部关联CSS控制外部SVG的样式，修改CSS规则补充width: auto即可：

.header__nav-icon {
  height: 30px;
  width: auto;
}

@media screen and (max-width: 380px) {
  .header__nav-icon {
    height: 24px;
  }
}

2. 如果你是通过<img>标签引入SVG，直接将类名加在<img>标签上，同时去掉img标签的内联宽高属性即可，不需要在SVG内部关联CSS文件。
3. 也可以直接在SVG根标签上设置默认相对单位宽高width="1em" height="1em"，后续CSS可以正常覆盖这两个属性，不会出现无法修改的问题。

内容的提问来源于stack exchange，提问作者Aлександр Агафонов