为什么在某些Chrome条件下，SVG路径元素的fill属性会填充整个边框？

编程问答 2022-06-10

问题描述

我正在开发带有react的SVG编辑应用程序。 SVG中的所有文本都会在opentype.js中转换为路径元素。

在某些时候，某些路径元素的整个边界框突然变黑了。 在调查了问题之后，我发现这是在某些条件下发生的。

  • 在Chrome中显示SVG。
  • 将路径元素的fill属性设置为单调颜色（例如，黑色，灰色）
  • 将path元素拆分成较小的部分似乎是正确的

有什么方法可以使path元素在Chrome中正确显示？

我的Chrome版本是85.0.4183.121

我创建了CSB：https://codesandbox.io/s/stupefied-cloud-q4ivo?file=/src/App.js

-更新---

这是实际的屏幕截图。 用黑色填充的路径元素在这里。

然后我找到了用Answer编写的解决方案。

<svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="144"
      height="72"
    >
      <path
        fill="black"
        d="M10.76 35.47L4.99 35.47Q6.40 24.08 18.04 24.08L18.04 24.08Q29.74 24.08 29.74 36.63L29.74 36.63L29.74 53.82Q29.74 55.86 31.61 55.86L31.61 55.86Q32.24 55.86 33.33 55.62L33.33 55.62L33.33 60.68Q31.89 61.03 29.88 61.03L29.88 61.03Q25.14 61.03 24.50 55.72L24.50 55.72Q19.62 61.03 13.78 61.03L13.78 61.03Q9.95 61.03 7.49 59.03L7.49 59.03Q4.25 56.43 4.25 51.33L4.25 51.33Q4.25 39.48 24.57 38.07L24.57 38.07L24.57 36.63Q24.57 28.90 18.04 28.90L18.04 28.90Q11.29 28.90 10.76 35.47L10.76 35.47ZM24.57 47.36L24.57 42.61Q9.53 43.35 9.53 51.05L9.53 51.05Q9.53 56.21 14.63 56.21L14.63 56.21Q18.11 56.21 21.41 53.54L21.41 53.54Q24.57 51.05 24.57 47.36L24.57 47.36ZM41.34 59.70L41.34 9.28L46.69 9.28L46.69 29.36Q51.08 24.12 56.18 24.12L56.18 24.12Q61.49 24.12 64.83 28.72L64.83 28.72Q68.34 33.64 68.34 42.26L68.34 42.26Q68.34 48.30 66.48 52.91L66.48 52.91Q63.14 61.14 56.04 61.14L56.04 61.14Q50.17 61.14 46.62 55.23L46.62 55.23L45.25 59.70L41.34 59.70ZM54.88 29.21L54.88 29.21Q50.77 29.21 48.41 33.40L48.41 33.40Q46.48 36.84 46.48 42.26L46.48 42.26Q46.48 48.13 48.55 51.86L48.55 51.86Q50.91 56.04 54.95 56.04L54.95 56.04Q58.50 56.04 60.57 52.42L60.57 52.42Q62.72 48.76 62.72 42.26L62.72 42.26Q62.72 35.89 60.26 32.38L60.26 32.38Q58.22 29.21 54.88 29.21ZM97.84 48.23L103.68 48.23Q100.86 61.14 90.07 61.14L90.07 61.14Q83.57 61.14 79.77 55.72L79.77 55.72Q76.32 50.77 76.32 42.61L76.32 42.61Q76.32 34.84 79.56 29.88L79.56 29.88Q83.36 24.12 90 24.12L90 24.12Q100.30 24.12 103.11 35.79L103.11 35.79L97.35 35.79Q95.84 29.14 90.07 29.14L90.07 29.14Q86.41 29.14 84.27 32.52L84.27 32.52Q81.95 36.14 81.95 42.61L81.95 42.61Q81.95 47.95 83.53 51.36L83.53 51.36Q85.68 56.11 90.07 56.11L90.07 56.11Q96.47 56.11 97.84 48.23L97.84 48.23ZM133.31 29.36L133.31 9.28L138.66 9.28L138.66 59.70L134.75 59.70L133.38 55.23Q129.73 61.14 123.82 61.14L123.82 61.14Q118.37 61.14 115.03 55.86L115.03 55.86Q111.66 50.73 111.66 42.19L111.66 42.19Q111.66 35.19 114.19 30.38L114.19 30.38Q117.53 24.12 123.75 24.12L123.75 24.12Q128.92 24.12 133.31 29.36L133.31 29.36ZM125.05 29.21L125.05 29.21Q121.32 29.21 119.14 33.26L119.14 33.26Q117.28 36.91 117.28 42.26L117.28 42.26Q117.28 48.06 119.00 51.64L119.00 51.64Q121.04 56.04 125.05 56.04L125.05 56.04Q128.67 56.04 131.06 52.42L131.06 52.42Q133.52 48.80 133.52 42.26L133.52 42.26Q133.52 36.95 131.66 33.54L131.66 33.54Q129.38 29.21 125.05 29.21Z"
      />
    </svg>

enter image description here

解决方法

这不是Chrome错误，而是与硬件加速有关。一旦我禁用了硬件加速，然后启用了它，该错误就消失了。

这是Chrome Bugtracker的报告。 https://bugs.chromium.org/p/chromium/issues/detail?id=1135089

javascriptopentypereactjsreactjssvg