Chrome最新版本中SVG文本图案填充失效问题求助

针对你遇到的Chrome最新版本下，使用包含外部图片的<pattern>填充<text>元素失效的问题，可尝试以下几种可行方案：

方案1：为<image>添加CORS属性 #

如果外部图片所在服务器支持跨域资源共享（CORS），为pattern内的<image>标签添加crossorigin="anonymous"属性，可修复Chrome的加载限制：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="p1" patternUnits="userSpaceOnUse" width="32" height="32">
      <image xlink:href="http://phrogz.net/tmp/alphaball-small.png" width="32" height="32" crossorigin="anonymous" />
    </pattern>
    <pattern id="p2" patternUnits="userSpaceOnUse" width="10" height="10">
      <image xlink:href="http://phrogz.net/tmp/grid.gif" width="10" height="10" crossorigin="anonymous" />
    </pattern>
  </defs>
  <text x="20" y="170" fill="url(#p1)" font-size="150">
    Hello
    <tspan x="20" y="350" fill="url(#p2)">Wo<tspan fill="url(#p1)">r</tspan>ld</tspan>
  </text>
</svg>

方案2：将外部图片转为Data URI嵌入 #

把外部图片转换为Base64格式的Data URI，直接写入<image>的href属性，绕开外部资源加载的问题。这种方式无需依赖外部服务器，兼容性更好：

示例（以其中一张图片为例，实际需替换为对应图片的Data URI）：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="p1" patternUnits="userSpaceOnUse" width="32" height="32">
      <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5gMVESkqQzkWSwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAUSURBVEjH7cExAQAAAMKg9U9tDjegAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDtQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyNC0wNS0xMFQxNjo0Nzo1NyswMDowMOIHO44AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjQtMDUtMTBUMTY6NDc6NTcrMDA6MDCTf238AAAAAElFTkSuQmCC" width="32" height="32" />
    </pattern>
    <!-- p2 同理替换为对应Data URI -->
  </defs>
  <text x="20" y="170" fill="url(#p1)" font-size="150">
    Hello
    <tspan x="20" y="350" fill="url(#p2)">Wo<tspan fill="url(#p1)">r</tspan>ld</tspan>
  </text>
</svg>

方案3：JS触发重绘（临时 workaround） #

如果上述方案无法生效，可通过JavaScript监听图片加载完成后触发SVG重绘，确保图案在文本渲染前加载完成：

document.querySelectorAll('pattern image').forEach(img => {
  img.onload = () => {
    const svg = document.querySelector('svg');
    // 修改样式触发重绘
    svg.style.display = 'none';
    svg.offsetHeight;
    svg.style.display = '';
  };
});

问题原因推测 #

Chrome最新版本可能调整了SVG paint server（如pattern）与外部资源的加载优先级，或对跨域资源的渲染限制更严格，导致外部图片加载完成前文本已完成渲染，最终填充失效。

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