Angular中动态设置SVG描边颜色失效原因咨询

我尝试通过编程方式为内联SVG的<path>元素设置填充色和描边色，填充色正常显示，但描边色始终不生效，除非用HSLColor.of()方法创建新实例。

相关代码 #

TypeScript逻辑代码

baseColor: HSLColor = HSLColor.of(30, 40, 50); // 测试用基础颜色
strokeColor: HSLColor = HSLColor.of(0, 0, 60); // 默认描边色

ngOnInit() {
  // 尝试复制baseColor并修改value值得到深色版本，此方法无效
  this.strokeColor = {...this.baseColor, value: Math.max(0, this.baseColor.value - 40)};
  // 即使添加类型断言也无法解决问题
  // this.strokeColor = {...this.baseColor, value: Math.max(0, this.baseColor.value - 40)} as HSLColor;
}

SVG模板代码

<path d="..." style="{{'fill:' + this.baseColor + ';stroke:' + this.strokeColor + ';stroke-width:0.84px;'}}"/>

现象总结 #

• 移除ngOnInit中的代码，描边会显示默认的HSLColor.of(0,0,60)颜色，说明模板绑定逻辑本身无问题
• 用JSON.stringify打印strokeColor，显示修改前后仅value值不同，但描边仍无法渲染
• 改用以下代码则完全正常：

this.strokeColor = HSLColor.of(this.baseColor.hue, this.baseColor.saturation, this.baseColor.value - 40);

原因分析 #

核心问题在于扩展运算符(...)仅会复制对象的可枚举属性，不会继承原对象的原型链与类方法：

1. HSLColor是一个类实例，它除了hue、saturation、value这些显式属性外，原型链上还存在关键的toString()方法——该方法负责将实例转换为CSS可识别的HSL颜色字符串（例如hsl(30,40%,50%)）。
2. 用{...this.baseColor}创建的是普通JavaScript对象，仅包含原实例的可枚举属性，并未继承HSLColor原型链上的toString()。当模板将这个对象拼接到style字符串时，会调用普通对象默认的toString()，得到[object Object]而非有效颜色值，导致SVG无法识别描边色。
3. HSLColor.of()方法会创建真正的HSLColor类实例，继承了原型链上的所有方法，包括正确的toString()，因此能被CSS正确解析，描边正常显示。

验证方法 #

你可以在两种场景下打印toString()的结果，直观看到差异：

// 扩展运算符创建的对象
console.log(this.strokeColor.toString()); // 输出: [object Object]

// of方法创建的实例
console.log(this.strokeColor.toString()); // 输出: hsl(30,40%,10%) 这类有效颜色字符串

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