Логотип преобразован из .png в .svg и открыт файл .svg в VSCode, чтобы получить следующие пути SVG:
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns = "http://www.w3.org/2000/svg" version = "1.1" width = "1446px" height = "721px" style = "shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink = "http://www.w3.org/1999/xlink">
<g><path style = "opacity:0.986" fill = "#ad1a27" d = "M 1078.5,73.5 C 1114.33,74.486 1137.16,92.1526 1147,126.5C 1152.02,161.969 1138.52,187.469 1106.5,203C 1066.46,214.552 1037.29,201.719 1019,164.5C 1009.52,133.626 1017.02,107.793 1041.5,87C 1052.74,79.2017 1065.07,74.7017 1078.5,73.5 Z"/></g>
<g><path style = "opacity:0.986" fill = "#ad1a27" d = "M 1271.5,73.5 C 1309.25,74.7519 1332.42,93.7519 1341,130.5C 1344.26,162.16 1332.09,185.66 1304.5,201C 1273.29,213.552 1246.13,207.719 1223,183.5C 1208.12,163.444 1204.46,141.444 1212,117.5C 1223.13,91.0208 1242.97,76.3541 1271.5,73.5 Z"/></g>
<g><path style = "opacity:0.988" fill = "#2d2a24" d = "M 176.5,235.5 C 269.833,235.5 363.167,235.5 456.5,235.5C 456.5,250.167 456.5,264.833 456.5,279.5C 369.833,279.333 283.166,279.5 196.5,280C 176.733,279.95 158.399,284.95 141.5,295C 124.278,308.943 115.111,327.11 114,349.5C 113.333,408.5 113.333,467.5 114,526.5C 117.543,564.376 138.043,586.543 175.5,593C 181.473,593.907 187.473,594.573 193.5,595C 281.166,595.5 368.833,595.667 456.5,595.5C 456.5,610.167 456.5,624.833 456.5,639.5C 359.147,639.976 261.814,639.476 164.5,638C 106.945,632.441 73.1118,601.274 63,544.5C 61.7197,537.205 60.7197,529.872 60,522.5C 58.423,471.847 58.0897,421.18 59,370.5C 59.1465,344.951 63.8131,320.284 73,296.5C 86.6919,268.154 108.859,249.988 139.5,242C 151.824,238.947 164.158,236.781 176.5,235.5 Z"/></g>
<g><path style = "opacity:0.984" fill = "#2d2a24" d = "M 493.5,235.5 C 612.834,235.333 732.167,235.5 851.5,236C 871.159,237.22 889.159,243.22 905.5,254C 923.046,267.914 933.212,286.081 936,308.5C 936.667,330.167 936.667,351.833 936,373.5C 929.498,408.501 908.665,428.835 873.5,434.5C 909.5,437.004 930.333,456.004 936,491.5C 938,519.5 938,547.5 936,575.5C 930.784,609.384 911.284,629.55 877.5,636C 870.898,637.434 864.232,638.434 857.5,639C 736.167,639.5 614.834,639.667 493.5,639.5C 493.5,504.833 493.5,370.167 493.5,235.5 Z M 536.5,280.5 C 637.857,280.018 739.19,280.518 840.5,282C 874.405,287.753 888.405,307.753 882.5,342C 882.333,350.5 882.167,359 882,367.5C 878.213,389.954 865.046,403.12 842.5,407C 740.523,408.482 638.523,408.982 536.5,408.5C 536.5,365.833 536.5,323.167 536.5,280.5 Z M 536.5,454.5 C 635.501,454.333 734.501,454.5 833.5,455C 845.435,455.398 856.435,458.732 866.5,465C 875.628,472.692 880.795,482.526 882,494.5C 883.985,515.169 883.985,535.835 882,556.5C 878.085,576.748 865.918,588.581 845.5,592C 840.201,592.93 834.867,593.597 829.5,594C 731.832,594.547 634.165,594.38 536.5,593.5C 536.5,547.167 536.5,500.833 536.5,454.5 Z"/></g>
<g><path style = "opacity:0.985" fill = "#2d2a24" d = "M 1053.5,235.5 C 1072.87,235.107 1092.2,235.607 1111.5,237C 1145.94,243.944 1165.94,264.777 1171.5,299.5C 1174.44,259.729 1195.77,238.562 1235.5,236C 1261.86,235.086 1288.19,235.419 1314.5,237C 1347.28,243.118 1366.78,262.618 1373,295.5C 1374.37,302.446 1375.37,309.446 1376,316.5C 1376.5,424.499 1376.67,532.499 1376.5,640.5C 1361.17,640.5 1345.83,640.5 1330.5,640.5C 1330.39,561.665 1330.72,482.832 1331.5,404C 1331.33,384.5 1331.17,365 1331,345.5C 1330.95,331.634 1327.62,318.634 1321,306.5C 1312.33,296.049 1301.17,290.549 1287.5,290C 1268.14,289.107 1248.8,289.441 1229.5,291C 1209.45,294.047 1197.62,305.547 1194,325.5C 1193.09,329.795 1192.42,334.128 1192,338.5C 1191.5,439.166 1191.33,539.833 1191.5,640.5C 1176.17,640.5 1160.83,640.5 1145.5,640.5C 1145.98,537.143 1145.48,433.81 1144,330.5C 1140.4,308.755 1127.9,295.588 1106.5,291C 1088.17,290.333 1069.83,290.333 1051.5,291C 1037.3,294.195 1027.8,302.695 1023,316.5C 1021.2,321.375 1019.86,326.375 1019,331.5C 1017.52,434.474 1017.02,537.474 1017.5,640.5C 1002.5,640.5 987.5,640.5 972.5,640.5C 972.333,533.833 972.5,427.166 973,320.5C 974.588,293.161 985.422,270.328 1005.5,252C 1020.18,242.386 1036.18,236.886 1053.5,235.5 Z"/></g>
</svg>
Это изображение логотипа в формате .svg:
Приложение аварийно завершает работу, когда я включаю style = "opacity:0.986"
в свой компонент логотипа React (v18.2.0). Изменил его на style = {{opacity:0.986}}
, и React больше не вылетает, но моя буква «B» по-прежнему отображается неправильно:
Это код, который я использую в своем приложении React:
export default function ApplicationLogo(props) {
return (
<svg
{...props}
viewBox = "0 0 1500 800"
xmlns = "http://www.w3.org/2000/svg"
>
{/* <path d = "M305.8 81.125C305.77 80.995 305.69 80.885 305.65 80.755C305.56 80.525 305.49 80.285 305.37 80.075C305.29 79.935 305.17 79.815 305.07 79.685C304.94 79.515 304.83 79.325 304.68 79.175C304.55 79.045 304.39 78.955 304.25 78.845C304.09 78.715 303.95 78.575 303.77 78.475L251.32 48.275C249.97 47.495 248.31 47.495 246.96 48.275L194.51 78.475C194.33 78.575 194.19 78.725 194.03 78.845C193.89 78.955 193.73 79.045 193.6 79.175C193.45 79.325 193.34 79.515 193.21 79.685C193.11 79.815 192.99 79.935 192.91 80.075C192.79 80.285 192.71 80.525 192.63 80.755C192.58 80.875 192.51 80.995 192.48 81.125C192.38 81.495 192.33 81.875 192.33 82.265V139.625L148.62 164.795V52.575C148.62 52.185 148.57 51.805 148.47 51.435C148.44 51.305 148.36 51.195 148.32 51.065C148.23 50.835 148.16 50.595 148.04 50.385C147.96 50.245 147.84 50.125 147.74 49.995C147.61 49.825 147.5 49.635 147.35 49.485C147.22 49.355 147.06 49.265 146.92 49.155C146.76 49.025 146.62 48.885 146.44 48.785L93.99 18.585C92.64 17.805 90.98 17.805 89.63 18.585L37.18 48.785C37 48.885 36.86 49.035 36.7 49.155C36.56 49.265 36.4 49.355 36.27 49.485C36.12 49.635 36.01 49.825 35.88 49.995C35.78 50.125 35.66 50.245 35.58 50.385C35.46 50.595 35.38 50.835 35.3 51.065C35.25 51.185 35.18 51.305 35.15 51.435C35.05 51.805 35 52.185 35 52.575V232.235C35 233.795 35.84 235.245 37.19 236.025L142.1 296.425C142.33 296.555 142.58 296.635 142.82 296.725C142.93 296.765 143.04 296.835 143.16 296.865C143.53 296.965 143.9 297.015 144.28 297.015C144.66 297.015 145.03 296.965 145.4 296.865C145.5 296.835 145.59 296.775 145.69 296.745C145.95 296.655 146.21 296.565 146.45 296.435L251.36 236.035C252.72 235.255 253.55 233.815 253.55 232.245V174.885L303.81 145.945C305.17 145.165 306 143.725 306 142.155V82.265C305.95 81.875 305.89 81.495 305.8 81.125ZM144.2 227.205L100.57 202.515L146.39 176.135L196.66 147.195L240.33 172.335L208.29 190.625L144.2 227.205ZM244.75 114.995V164.795L226.39 154.225L201.03 139.625V89.825L219.39 100.395L244.75 114.995ZM249.12 57.105L292.81 82.265L249.12 107.425L205.43 82.265L249.12 57.105ZM114.49 184.425L96.13 194.995V85.305L121.49 70.705L139.85 60.135V169.815L114.49 184.425ZM91.76 27.425L135.45 52.585L91.76 77.745L48.07 52.585L91.76 27.425ZM43.67 60.135L62.03 70.705L87.39 85.305V202.545V202.555V202.565C87.39 202.735 87.44 202.895 87.46 203.055C87.49 203.265 87.49 203.485 87.55 203.695V203.705C87.6 203.875 87.69 204.035 87.76 204.195C87.84 204.375 87.89 204.575 87.99 204.745C87.99 204.745 87.99 204.755 88 204.755C88.09 204.905 88.22 205.035 88.33 205.175C88.45 205.335 88.55 205.495 88.69 205.635L88.7 205.645C88.82 205.765 88.98 205.855 89.12 205.965C89.28 206.085 89.42 206.225 89.59 206.325C89.6 206.325 89.6 206.325 89.61 206.335C89.62 206.335 89.62 206.345 89.63 206.345L139.87 234.775V285.065L43.67 229.705V60.135ZM244.75 229.705L148.58 285.075V234.775L219.8 194.115L244.75 179.875V229.705ZM297.2 139.625L253.49 164.795V114.995L278.85 100.395L297.21 89.825V139.625H297.2Z" /> */}
<g>
<path
style = {{ opacity: 0.986 }}
fill = "#ad1a27"
d = "M 1078.5,73.5 C 1114.33,74.486 1137.16,92.1526 1147,126.5C 1152.02,161.969 1138.52,187.469 1106.5,203C 1066.46,214.552 1037.29,201.719 1019,164.5C 1009.52,133.626 1017.02,107.793 1041.5,87C 1052.74,79.2017 1065.07,74.7017 1078.5,73.5 Z"
/>
</g>
<g>
<path
style = {{ opacity: 0.986 }}
fill = "#ad1a27"
d = "M 1271.5,73.5 C 1309.25,74.7519 1332.42,93.7519 1341,130.5C 1344.26,162.16 1332.09,185.66 1304.5,201C 1273.29,213.552 1246.13,207.719 1223,183.5C 1208.12,163.444 1204.46,141.444 1212,117.5C 1223.13,91.0208 1242.97,76.3541 1271.5,73.5 Z"
/>
</g>
<g>
<path
style = {{ opacity: 0.988 }}
fill = "#2d2a24"
d = "M 176.5,235.5 C 269.833,235.5 363.167,235.5 456.5,235.5C 456.5,250.167 456.5,264.833 456.5,279.5C 369.833,279.333 283.166,279.5 196.5,280C 176.733,279.95 158.399,284.95 141.5,295C 124.278,308.943 115.111,327.11 114,349.5C 113.333,408.5 113.333,467.5 114,526.5C 117.543,564.376 138.043,586.543 175.5,593C 181.473,593.907 187.473,594.573 193.5,595C 281.166,595.5 368.833,595.667 456.5,595.5C 456.5,610.167 456.5,624.833 456.5,639.5C 359.147,639.976 261.814,639.476 164.5,638C 106.945,632.441 73.1118,601.274 63,544.5C 61.7197,537.205 60.7197,529.872 60,522.5C 58.423,471.847 58.0897,421.18 59,370.5C 59.1465,344.951 63.8131,320.284 73,296.5C 86.6919,268.154 108.859,249.988 139.5,242C 151.824,238.947 164.158,236.781 176.5,235.5 Z"
/>
</g>
<g>
<path
style = {{ opacity: 0.984 }}
fill = "#2d2a24"
d = "M 493.5,235.5 C 612.834,235.333 732.167,235.5 851.5,236C 871.159,237.22 889.159,243.22 905.5,254C 923.046,267.914 933.212,286.081 936,308.5C 936.667,330.167 936.667,351.833 936,373.5C 929.498,408.501 908.665,428.835 873.5,434.5C 909.5,437.004 930.333,456.004 936,491.5C 938,519.5 938,547.5 936,575.5C 930.784,609.384 911.284,629.55 877.5,636C 870.898,637.434 864.232,638.434 857.5,639C 736.167,639.5 614.834,639.667 493.5,639.5C 493.5,504.833 493.5,370.167 493.5,235.5 Z M 536.5,280.5 C 637.857,280.018 739.19,280.518 840.5,282C 874.405,287.753 888.405,307.753 882.5,342C 882.333,350.5 882.167,359 882,367.5C 878.213,389.954 865.046,403.12 842.5,407C 740.523,408.482 638.523,408.982 536.5,408.5C 536.5,365.833 536.5,323.167 536.5,280.5 Z M 536.5,454.5 C 635.501,454.333 734.501,454.5 833.5,455C 845.435,455.398 856.435,458.732 866.5,465C 875.628,472.692 880.795,482.526 882,494.5C 883.985,515.169 883.985,535.835 882,556.5C 878.085,576.748 865.918,588.581 845.5,592C 840.201,592.93 834.867,593.597 829.5,594C 731.832,594.547 634.165,594.38 536.5,593.5C 536.5,547.167 536.5,500.833 536.5,454.5 Z"
/>
</g>
<path
style = {{ opacity: 0.985 }}
fill = "#2d2a24"
d = "M 1053.5,235.5 C 1072.87,235.107 1092.2,235.607 1111.5,237C 1145.94,243.944 1165.94,264.777 1171.5,299.5C 1174.44,259.729 1195.77,238.562 1235.5,236C 1261.86,235.086 1288.19,235.419 1314.5,237C 1347.28,243.118 1366.78,262.618 1373,295.5C 1374.37,302.446 1375.37,309.446 1376,316.5C 1376.5,424.499 1376.67,532.499 1376.5,640.5C 1361.17,640.5 1345.83,640.5 1330.5,640.5C 1330.39,561.665 1330.72,482.832 1331.5,404C 1331.33,384.5 1331.17,365 1331,345.5C 1330.95,331.634 1327.62,318.634 1321,306.5C 1312.33,296.049 1301.17,290.549 1287.5,290C 1268.14,289.107 1248.8,289.441 1229.5,291C 1209.45,294.047 1197.62,305.547 1194,325.5C 1193.09,329.795 1192.42,334.128 1192,338.5C 1191.5,439.166 1191.33,539.833 1191.5,640.5C 1176.17,640.5 1160.83,640.5 1145.5,640.5C 1145.98,537.143 1145.48,433.81 1144,330.5C 1140.4,308.755 1127.9,295.588 1106.5,291C 1088.17,290.333 1069.83,290.333 1051.5,291C 1037.3,294.195 1027.8,302.695 1023,316.5C 1021.2,321.375 1019.86,326.375 1019,331.5C 1017.52,434.474 1017.02,537.474 1017.5,640.5C 1002.5,640.5 987.5,640.5 972.5,640.5C 972.333,533.833 972.5,427.166 973,320.5C 974.588,293.161 985.422,270.328 1005.5,252C 1020.18,242.386 1036.18,236.886 1053.5,235.5 Z"
/>
</svg>
);
}
Как сделать так, чтобы дырки в B появились?
Вылетает на какой операционной системе. Какой браузер. Какое сообщение об ошибке. Какая версия реакции.
2 возможности: определите закрашенную черным внешнюю границу буквы B и 2 белых внутренних пути (определяемых после внешней границы) или (если вы хотите видеть сквозь отверстия) определите закрашенную черным рамку буквы B с «разрезами» по прямой. секции для отслеживания отверстий
Правило заполнения, рендеринг формы и т. д. не являются допустимыми свойствами CSS, и они указаны в объявлении «стиля», что может быть проблемой. Восстановите их как атрибуты SVG (например, fill-rule = «evenodd»), и все может работать.
@Michael Mullany: правила заливки, рендеринг форм и т. д. поддерживаются современными браузерами (исходный svg работает безупречно — даже на iOS). Однако правило четно-нечетного заполнения применяется к родительскому SVG и наследуется дочерним путям. Вполне вероятно, что свойство/атрибут не копируется в компонент props
. Вы можете избавиться от правил заполнения, изменив направления подпутей, как описано здесь «Преобразование svg с fill-rule = "evenodd" в fill-rule = "nonzero"
@herrstrietzel Я думал, что React может выполнять некоторую внутреннюю проверку, используя список допустимых свойств CSS, а не копируя недопустимые свойства - это единственное, что я вижу в коде неправильно. Но оказывается, что он не копировал правило заполнения в реквизит, как вы думали, и не показал свое объявление реквизита.
Похоже, вы удалили атрибут стиля ( style = "shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
) из элемента svg. Но не волнуйтесь: единственное свойство, которое вам нужно, это fill-rule:evenodd
. Итак, у вас есть следующий код для буквы «B»:
<g>
<path
style = {{ opacity: 0.984 }}
fill = "#2d2a24"
d = "M 493.5,235.5 C 612.834,235.333 732.167,235.5 851.5,236C 871.159,237.22 889.159,243.22 905.5,254C 923.046,267.914 933.212,286.081 936,308.5C 936.667,330.167 936.667,351.833 936,373.5C 929.498,408.501 908.665,428.835 873.5,434.5C 909.5,437.004 930.333,456.004 936,491.5C 938,519.5 938,547.5 936,575.5C 930.784,609.384 911.284,629.55 877.5,636C 870.898,637.434 864.232,638.434 857.5,639C 736.167,639.5 614.834,639.667 493.5,639.5C 493.5,504.833 493.5,370.167 493.5,235.5 Z M 536.5,280.5 C 637.857,280.018 739.19,280.518 840.5,282C 874.405,287.753 888.405,307.753 882.5,342C 882.333,350.5 882.167,359 882,367.5C 878.213,389.954 865.046,403.12 842.5,407C 740.523,408.482 638.523,408.982 536.5,408.5C 536.5,365.833 536.5,323.167 536.5,280.5 Z M 536.5,454.5 C 635.501,454.333 734.501,454.5 833.5,455C 845.435,455.398 856.435,458.732 866.5,465C 875.628,472.692 880.795,482.526 882,494.5C 883.985,515.169 883.985,535.835 882,556.5C 878.085,576.748 865.918,588.581 845.5,592C 840.201,592.93 834.867,593.597 829.5,594C 731.832,594.547 634.165,594.38 536.5,593.5C 536.5,547.167 536.5,500.833 536.5,454.5 Z"
/>
</g>
Вы можете очистить его, удалив элемент g и используя непрозрачность атрибута svg вместо style = {{ opacity: 0.984 }}
и правила заполнения атрибута для «B»:
<path
opacity = "0.984"
fill-rule = "evenodd"
fill = "#2d2a24"
d = "M 493.5,235.5 C 612.834,235.333 732.167,235.5 851.5,236C 871.159,237.22 889.159,243.22 905.5,254C 923.046,267.914 933.212,286.081 936,308.5C 936.667,330.167 936.667,351.833 936,373.5C 929.498,408.501 908.665,428.835 873.5,434.5C 909.5,437.004 930.333,456.004 936,491.5C 938,519.5 938,547.5 936,575.5C 930.784,609.384 911.284,629.55 877.5,636C 870.898,637.434 864.232,638.434 857.5,639C 736.167,639.5 614.834,639.667 493.5,639.5C 493.5,504.833 493.5,370.167 493.5,235.5 Z M 536.5,280.5 C 637.857,280.018 739.19,280.518 840.5,282C 874.405,287.753 888.405,307.753 882.5,342C 882.333,350.5 882.167,359 882,367.5C 878.213,389.954 865.046,403.12 842.5,407C 740.523,408.482 638.523,408.982 536.5,408.5C 536.5,365.833 536.5,323.167 536.5,280.5 Z M 536.5,454.5 C 635.501,454.333 734.501,454.5 833.5,455C 845.435,455.398 856.435,458.732 866.5,465C 875.628,472.692 880.795,482.526 882,494.5C 883.985,515.169 883.985,535.835 882,556.5C 878.085,576.748 865.918,588.581 845.5,592C 840.201,592.93 834.867,593.597 829.5,594C 731.832,594.547 634.165,594.38 536.5,593.5C 536.5,547.167 536.5,500.833 536.5,454.5 Z"
/>
В простой версии SVG это будет выглядеть так:
<svg xmlns = "http://www.w3.org/2000/svg"
viewBox = "0 0 1446 721"
width = "300">
<path
opacity = "0.986"
fill = "#ad1a27"
d = "M 1078.5,73.5 C 1114.33,74.486 1137.16,92.1526 1147,126.5C 1152.02,161.969 1138.52,187.469 1106.5,203C 1066.46,214.552 1037.29,201.719 1019,164.5C 1009.52,133.626 1017.02,107.793 1041.5,87C 1052.74,79.2017 1065.07,74.7017 1078.5,73.5 Z"/>
<path
opacity = "0.986"
fill = "#ad1a27"
d = "M 1271.5,73.5 C 1309.25,74.7519 1332.42,93.7519 1341,130.5C 1344.26,162.16 1332.09,185.66 1304.5,201C 1273.29,213.552 1246.13,207.719 1223,183.5C 1208.12,163.444 1204.46,141.444 1212,117.5C 1223.13,91.0208 1242.97,76.3541 1271.5,73.5 Z"/>
<path
opacity = "0.988"
fill = "#2d2a24"
d = "M 176.5,235.5 C 269.833,235.5 363.167,235.5 456.5,235.5C 456.5,250.167 456.5,264.833 456.5,279.5C 369.833,279.333 283.166,279.5 196.5,280C 176.733,279.95 158.399,284.95 141.5,295C 124.278,308.943 115.111,327.11 114,349.5C 113.333,408.5 113.333,467.5 114,526.5C 117.543,564.376 138.043,586.543 175.5,593C 181.473,593.907 187.473,594.573 193.5,595C 281.166,595.5 368.833,595.667 456.5,595.5C 456.5,610.167 456.5,624.833 456.5,639.5C 359.147,639.976 261.814,639.476 164.5,638C 106.945,632.441 73.1118,601.274 63,544.5C 61.7197,537.205 60.7197,529.872 60,522.5C 58.423,471.847 58.0897,421.18 59,370.5C 59.1465,344.951 63.8131,320.284 73,296.5C 86.6919,268.154 108.859,249.988 139.5,242C 151.824,238.947 164.158,236.781 176.5,235.5 Z"/>
<path
opacity = "0.984"
fill-rule = "evenodd"
fill = "#2d2a24"
d = "M 493.5,235.5 C 612.834,235.333 732.167,235.5 851.5,236C 871.159,237.22 889.159,243.22 905.5,254C 923.046,267.914 933.212,286.081 936,308.5C 936.667,330.167 936.667,351.833 936,373.5C 929.498,408.501 908.665,428.835 873.5,434.5C 909.5,437.004 930.333,456.004 936,491.5C 938,519.5 938,547.5 936,575.5C 930.784,609.384 911.284,629.55 877.5,636C 870.898,637.434 864.232,638.434 857.5,639C 736.167,639.5 614.834,639.667 493.5,639.5C 493.5,504.833 493.5,370.167 493.5,235.5 Z M 536.5,280.5 C 637.857,280.018 739.19,280.518 840.5,282C 874.405,287.753 888.405,307.753 882.5,342C 882.333,350.5 882.167,359 882,367.5C 878.213,389.954 865.046,403.12 842.5,407C 740.523,408.482 638.523,408.982 536.5,408.5C 536.5,365.833 536.5,323.167 536.5,280.5 Z M 536.5,454.5 C 635.501,454.333 734.501,454.5 833.5,455C 845.435,455.398 856.435,458.732 866.5,465C 875.628,472.692 880.795,482.526 882,494.5C 883.985,515.169 883.985,535.835 882,556.5C 878.085,576.748 865.918,588.581 845.5,592C 840.201,592.93 834.867,593.597 829.5,594C 731.832,594.547 634.165,594.38 536.5,593.5C 536.5,547.167 536.5,500.833 536.5,454.5 Z"/>
<path
opacity = "0.985"
fill = "#2d2a24"
d = "M 1053.5,235.5 C 1072.87,235.107 1092.2,235.607 1111.5,237C 1145.94,243.944 1165.94,264.777 1171.5,299.5C 1174.44,259.729 1195.77,238.562 1235.5,236C 1261.86,235.086 1288.19,235.419 1314.5,237C 1347.28,243.118 1366.78,262.618 1373,295.5C 1374.37,302.446 1375.37,309.446 1376,316.5C 1376.5,424.499 1376.67,532.499 1376.5,640.5C 1361.17,640.5 1345.83,640.5 1330.5,640.5C 1330.39,561.665 1330.72,482.832 1331.5,404C 1331.33,384.5 1331.17,365 1331,345.5C 1330.95,331.634 1327.62,318.634 1321,306.5C 1312.33,296.049 1301.17,290.549 1287.5,290C 1268.14,289.107 1248.8,289.441 1229.5,291C 1209.45,294.047 1197.62,305.547 1194,325.5C 1193.09,329.795 1192.42,334.128 1192,338.5C 1191.5,439.166 1191.33,539.833 1191.5,640.5C 1176.17,640.5 1160.83,640.5 1145.5,640.5C 1145.98,537.143 1145.48,433.81 1144,330.5C 1140.4,308.755 1127.9,295.588 1106.5,291C 1088.17,290.333 1069.83,290.333 1051.5,291C 1037.3,294.195 1027.8,302.695 1023,316.5C 1021.2,321.375 1019.86,326.375 1019,331.5C 1017.52,434.474 1017.02,537.474 1017.5,640.5C 1002.5,640.5 987.5,640.5 972.5,640.5C 972.333,533.833 972.5,427.166 973,320.5C 974.588,293.161 985.422,270.328 1005.5,252C 1020.18,242.386 1036.18,236.886 1053.5,235.5 Z"/>
</svg>
Решено! Просто добавление этого в путь SVG для буквы «B» сработало!
fill-rule = "evenodd"
<path opacity = "0.984"
fill-rule = "evenodd"
fill = "#2d2a24"
d = "M 493.5,235.5 C 612.834,235.333 732.167,235.5 851.5,236C `871.159,237.22 889.159,243.22 905.5,254C 923.046,267.914 933.212,286.081 936,308.5C 936.667,330.167 936.667,351.833 936,373.5C 929.498,408.501 908.665,428.835 873.5,434.5C 909.5,437.004 930.333,456.004 936,491.5C 938,519.5 938,547.5 936,575.5C 930.784,609.384 911.284,629.55 877.5,636C 870.898,637.434 864.232,638.434 857.5,639C 736.167,639.5 614.834,639.667 493.5,639.5C 493.5,504.833 493.5,370.167 493.5,235.5 Z M 536.5,280.5 C 637.857,280.018 739.19,280.518 840.5,282C 874.405,287.753 888.405,307.753 882.5,342C 882.333,350.5 882.167,359 882,367.5C 878.213,389.954 865.046,403.12 842.5,407C 740.523,408.482 638.523,408.982 536.5,408.5C 536.5,365.833 536.5,323.167 536.5,280.5 Z M 536.5,454.5 C 635.501,454.333 734.501,454.5 833.5,455C 845.435,455.398 856.435,458.732 866.5,465C 875.628,472.692 880.795,482.526 882,494.5C 883.985,515.169 883.985,535.835 882,556.5C 878.085,576.748 865.918,588.581 845.5,592C 840.201,592.93 834.867,593.597 829.5,594C 731.832,594.547 634.165,594.38 536.5,593.5C 536.5,547.167 536.5,500.833 536.5,454.5 Z"/>`
Предоставьте полный код SVG для лучшего понимания, пожалуйста.