颜色写成 #1a6fd4cc，老版本浏览器直接忽略

现象

样式里写 fillColor: '#1a6fd4cc'，α 通道为 cc（约 80%）。 在新版 Chrome 中正常显示为半透明蓝色。 在客户的内嵌浏览器（Chromium 76 内核）中，该图层完全不显示， 控制台没有任何报错，DOM 里 fill 属性的值被保留为 #1a6fd4cc。

原因

八位十六进制颜色（#RRGGBBAA）是 CSS Color Module Level 4 的特性， SVG 1.1 的 fill 属性并不支持。 SVG 渲染器遇到不认识的颜色值，按规范会当作无效值， 回退到初始值 black 或直接不绘制，具体行为取决于内核版本。

Leaflet 的 fillColor 最终写到 SVG 的 fill 属性上， fillOpacity 才写到 fill-opacity。 把 alpha 塞进颜色字符串，等于绕过了 fill-opacity。

排查过程

1. 在 Elements 面板选中路径，看 fill 属性的实际字符串。
2. 把该字符串粘到 CSS 的 background-color 上试，看浏览器能否识别。
3. 用 CSS.supports('color', '#1a6fd4cc') 判断当前内核是否支持。
4. 对比同一份样式在新旧浏览器中的渲染差异，确认是颜色解析而非数据问题。

console.log(CSS.supports('color', '#1a6fd4cc'));   // false  -> 该内核不支持八位色值
console.log(document.querySelector('path').getAttribute('fill'));   // #1a6fd4cc

解决方案

颜色与透明度分开设置。SVG 场景一律用 fillOpacity， HTML 场景用 rgba()。

// 正确：六位色 + 独立的透明度
L.geoJSON(data, {
  style: {
    fillColor: '#1a6fd4',
    fillOpacity: 0.8,
    color: '#1259ad',
    opacity: 0.9,
    weight: 1
  }
}).addTo(map);

// 若已有八位色值，运行时拆成两部分
function splitHexAlpha(hex) {
  if (!/^#[0-9a-f]{8}$/i.test(hex)) return { color: hex, alpha: 1 };
  return {
    color: hex.slice(0, 7),
    alpha: parseInt(hex.slice(7), 16) / 255
  };
}
const { color, alpha } = splitHexAlpha('#1a6fd4cc');
// { color: '#1a6fd4', alpha: 0.8 }

验证

在目标内核中打开页面，图层正常显示为半透明蓝色； SVG 路径的 fill 为六位色值，fill-opacity 为 0.8。

const p = document.querySelector('path');
console.assert(/^#[0-9a-f]{6}$/i.test(p.getAttribute('fill')), '仍为八位色值');
console.assert(Number(p.getAttribute('fill-opacity')) === 0.8, '透明度未分离');

适用版本