Angular 8项目中如何覆盖带xmlns属性的动态生成SVG的max-width样式

问题根因 #

你的样式不生效主要存在三个问题：

• Angular 默认开启视图封装（ViewEncapsulation.Emulated），组件样式仅能匹配组件模板中静态声明的元素，该SVG是动态生成后插入到页面的，不属于组件模板静态元素，因此默认组件样式无法匹配到该元素
• 你当前仅设置了min-width属性，没有覆盖SVG行内样式自带的max-width限制，即便样式命中也无法达到预期效果
• 额外说明：SVG的xmlns是标准命名空间属性，对CSS选择器匹配完全没有影响，不需要针对该属性做特殊适配

覆盖element.style样式的方法 #

行内样式（element.style）的优先级高于普通类、ID选择器样式：

• 如果行内样式没有加!important，你可以通过命中元素的样式规则加!important覆盖
• 如果行内样式本身带!important，只能通过JS直接修改行内属性覆盖

可用解决方案 #

方案1：使用::ng-deep穿透视图封装（最常用，推荐） #

在组件的scss文件中添加如下样式，:host可以限定样式仅作用于当前组件内部，不会污染全局样式：

:host ::ng-deep svg#graphDiv {
  max-width: 1000px !important; /* 覆盖行内的max-width */
  min-width: 1000px !important;
}

方案2：动态生成后直接操作DOM修改行内样式（优先级最高，无样式污染） #

在你确认SVG已经生成并插入到mermaidDiv后的逻辑中添加如下代码：

const svgElement = this.mermaidDiv.nativeElement.querySelector('#graphDiv');
if (svgElement) {
  // 直接修改行内max-width属性
  svgElement.style.maxWidth = '1000px';
  // 也可以直接移除max-width限制：svgElement.style.removeProperty('max-width');
}

方案3：关闭组件视图封装（不推荐，容易污染全局样式） #

在组件的@Component装饰器中添加配置关闭视图封装，之后你原来写的样式就可以直接命中动态生成的元素：

import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
  encapsulation: ViewEncapsulation.None
})

使用该方案建议给选择器添加唯一组件前缀，避免影响其他页面的同名元素。

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