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

Posted 2023-03-15

【中文标题】为啥在某些 Chrome 条件下 SVG 路径元素的填充属性会填充整个边界框？

【英文标题】：Why does the fill attribute of the SVG path element fill the entire bounding box in some Chrome conditions?为什么在某些 Chrome 条件下 SVG 路径元素的填充属性会填充整个边界框？

【发布时间】：2021-01-20 03:45:04

【问题描述】：

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

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

在 chrome 中显示 SVG。 将路径元素的填充属性设置为单调颜色（例如，黑色、灰色） 将路径元素拆分成更小的部分似乎是正确的

有没有办法让路径元素在 Chrome 中正确显示？

---

我的 Chrome 版本是 85.0.4183.121

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

---更新---

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

我找到了答案中写的解决方案。

<svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      
      
    >
      <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>

【问题讨论】：

如果您发现了 Chrome 错误，请将其报告给 Chrome 的错误跟踪器。

谢谢罗伯特。可以。很抱歉，您能告诉我错误报告的链接吗？

bugs.chromium.org/p/chromium/issues/list

我的版本 85.0.4183.121 没有问题

根据how to ask a good question，只添加一个指向可运行代码示例的链接除了在您的帖子中显示minimal reproducible example，这样您的问题一次仍然有意义您的外部链接不可避免地会变成 404。还要注意，这里的 MCVE 工作的一部分是为了弄清楚这是否是因为 React：您所显示的内容不依赖于 React，因此您的 MCVE 可能应该只是在纯 html 和 JS 中。

【参考方案1】：

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

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