Я разрабатываю приложение для редактирования SVG с помощью реакции. Весь текст в SVG преобразуется в элементы пути в opentype.js.
В какой-то момент вся ограничивающая рамка для некоторых элементов пути внезапно становится затемненной. Изучив проблему, я выяснил, что это происходит при определенных условиях.
- Отображение 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"
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>
