可缩放矢量图形（SVG）是一种基于XML的二维矢量图形格式，也可以在HTML中使用。不要仅仅因为您的项目使用SVG而添加此标记。相反，如果您的问题是关于SVG或与其密切相关的问题，请添加标记，例如如何使用SVG实现某些功能。
SVG 未显示 - jsPlumb 和 html2canvas
我正在使用 jsPlumb 来显示图表。一切工作正常，当我尝试使用 html2canvas (1.0.0-rc.5) 时，问题就出现了，SVG 不会显示在图像中。这是我正在使用的代码： 有趣...
如上图所示，这两个 svg 图像的质量有所下降。在资源的属性检查器中，其“比例”属性设置为“单一比例”。 这些是按钮的 imageViews，
我在显示通过 img 标签编码的 svg/base64 时遇到一些问题。 这是流程： 我从服务器获取 iconData （字符串类型）。 想在我的组件中显示它。 p.1 没有问题...
我正在尝试更改 svg 的颜色，但找不到要更改的颜色代码。 我知道我需要在这里更改 fill='%23C03865'。 如何获取颜色代码：#D1FF71 我试过了...
为什么 Inkscape 中的文本看起来很奇怪（粗/粗体，更接近）？
我正在使用 Inkscape 1.2（dc2aedaf03，2022-05-15）。 无论我使用哪种字体，文本看起来都很丑。字母非常接近并且彼此接触。一般来说，即使在正常情况下，文本也非常粗/粗体
我需要在输入中放置图标以创建新用户。对于了解前端代码的人来说，这可能是一项非常简单的任务。但我不这么认为。这是线框图和...
SVG 徽标中的字母 B 在 React 应用程序中无法正确显示
Logo从.png转换为.svg，并在VSCode中打开.svg文件，得到以下SVG路径： Logo 从 .png 转换为 .svg，并在 VSCode 中打开 .svg 文件，得到以下 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图像： 当我在 React (v18.2.0) 徽标组件中包含 style="opacity:0.986" 时，应用程序崩溃。将其更改为 style={{opacity:0.986}} 并且 React 不再崩溃，但我的字母“B”仍然错误地显示为： 字母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 中的孔显示出来？ 看起来您从 svg 元素中删除了 style 属性 ( style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd")。但不要介意——您唯一需要的属性是 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 的公共导入在 Next JS v14.2.1 中不起作用，而之前在 v14.0.3 中起作用
我已经使用更新了我的 NEXTJS 项目的所有包 npx npm 检查更新 -u npm 安装 更新后我没有更改任何其他文件。 现在，当我运行该项目时，页面是
Lorem ipsum je označení pro standardnípseudolatinskýtextužívanývgrafickém designu a navrhovaníjako Demonstrativnívýplňovýtextpři vytvářenípracovních ukázek grafických návrhů。利普森德
我正在使用内联 SVG，如下所示： icon-checkmark.svg 的内容： 我正在使用这样的内联 SVG： icon-checkmark.svg的内容： <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 46 46"><title id="myTitleID">An accessible title</title><path {…} /></svg> 导入和内联： import CheckmarkSvg from '/img/site-components/icon-checkmark.svg'; <CheckmarkSvg role="image" aria-labelledby="myTitleID" className="myClass" /> 但是 Docusaurus 从渲染的 SVG 中删除了标题的 ID 属性。 有解决方法吗？如果没有它，标题在某些浏览器中将无法访问。 正如 @ccprog 在他们的评论中所述，Docusaurus 依赖于 SVGR，而 SVGR 又依赖于 SVGO。 SVGO 是最终做这件事的图书馆。但是，最新版本的 Docusaurus 不再删除 <title>，因为 Docusaurus 预先配置了 SVGR/SVGO 以忽略该行为。 参考：fix(utils)：使SVGO不删除标题 关于一般删除<title>，这确实是 SVGO 的一个缺陷，这种行为将在下一个主要版本中被禁用。 虽然这不再是一个持续存在的问题，但我将给出如何解决此类问题的答案，以防有人想通过 Docusaurus 重新配置其他 SVGO 插件。 我建议通过 Docusaurus 的 Lifecycle API 解决此问题。可以使用 configureWebpack 功能来更改 SVGO 选项。 为此，请在您的存储库中为 Docusaurus 创建一个自定义插件。 src/plugins/configure-svgo.js /** * Docusaurus uses SVGR internally, which in turn uses SVGO. This alters the * SVGO config and merges the changes back into Docusaurus' webpack config. * * @returns {Object} */ function configureSvgo() { return { name: 'configure-svgo', configureWebpack(config) { /** @type {object[]} */ const rules = config.module.rules; const rule = rules.find((rule) => { /** @type {string|undefined} */ const loader = rule.oneOf?.[0]?.use?.[0]?.loader; return loader && loader.includes("/@svgr/"); }); const svgoConfig = rule.oneOf[0].use[0].options.svgoConfig; // alter svgoConfig with whatever changes you need return { mergeStrategy: { "module.rules": "replace" }, module: { rules } }; } }; } module.exports = configureSvgo; 您可以通过将插件附加到插件数组或禁用默认预设中的插件等来更改svgoConfig。在这种情况下，您需要禁用插件。 创建插件后，您需要在 Docusaurus 配置中启用它： docusaurus.config.js // … plugins: [ // … "./src/plugins/configure-svgo.js" ], // … Docusaurus 现在会将您的 SVGO 配置传递到 SVGR/SVGO，因此 SVG 仍将得到优化，但也可以满足您的要求。
“折线”（svg）中的动画“点”似乎在 iOS（不是 macOS）上有 512 限制/错误
我有一个 SVG，里面有一条折线。 在桌面、Android、macOS 上，动画效果非常好。 该线从左侧开始向右绘制。 在 iPadOS 和 iOS 上，动画...
我创建了这个 svg 边框路径。但是曲线看起来不平滑。如果我增加行程宽度=“1”，曲线就会消失。 （边缘和之间的弧线） 我想做...
我正在尝试解决使用 OpenCV 在徽标周围创建路径的问题。 我附上了两个图像，tekst.png 和 tekst2.png。我还附上了一个图像 Comparison.png，显示了想要的 r...
如何在js中做svg激光笔。就像 exlidraw 或 google 幻灯片中的那样？
我尝试使用 svg 路径元素创建鼠标轨迹。 使用贝塞尔曲线进行平滑，但不知何故平滑效果不好。 有人可以帮我弄这个吗。 常量平滑 = 0.10； 功能线(
在从 webpack 迁移到 vite 的过程中，我遇到了以下问题。我有以下 React 组件： 从 '@styles/pages/product/other/other.module.scss' 导入 { otherQuote as other__quote } ； ...
我正在使用 Xamarin.Forms 开发一个应用程序，我正在尝试将启动屏幕插入我的 Android 项目。 我找到了一些创建具有背景颜色和统计信息的启动屏幕的教程......
React Native SVG：全屏自适应 viewBox
我正在尝试使用“react-native-svg”库制作全屏场景。 这是我的组件渲染代码： 我正在尝试使用“react-native-svg”库制作全屏场景。 这是我的组件渲染代码： <Svg viewBox="0 0 100 100" height="100%"> <Rect x="25" y="25" width="50" height="50" stroke="red" strokeWidth="2" fill="yellow" /> </Svg> 这就是我想要得到的： 但是我在横向模式下所拥有的： 还有最重要的一点。当调整大小事件发生时，块被标准化： 修复者 const viewBox = '0 0 '+this.state.screenWidth+' '+this.state.screenHeight; return <Svg viewBox={viewBox} style={styles.wrapper}> 我认为这不是最好的解决方案，但它是有效的 <YourSVG width={undefined} height={undefined} style={{width: '100%', height: '100%'}} preserveAspectRatio="none" />
通过 ID 获取元素并在 SVG Inkscape 中更改其颜色
我有一个使用 Inkscape 创建的简单绘图，这是 Inkscape 文件：
我正在寻找一些方向，不一定是代码。 我想用 SVG 文本拼出我的名字。 到目前为止，我已经能够放置它并允许它为绘图制作动画，但这不会发生在......