可缩放矢量图形（SVG）是一种基于XML的二维矢量图形格式，也可以在HTML中使用。不要仅仅因为您的项目使用SVG而添加此标记。相反，如果您的问题是关于SVG或与其密切相关的问题，请添加标记，例如如何使用SVG实现某些功能。
我对整个 svg 主题还很陌生，我正在学习如何优化 svg。这是一个优化示例： 旧矢量图形： 我对整个 svg 主题还很陌生，我正在学习如何优化 svg。这是一个优化示例： 旧矢量图形： <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="black" stroke="none"> <path d="M 24,39.51A 2.29,2.29 43.71 0 1 22.24,37.9L 7.67,9.73A 1.56,1.56 105.76 0 1 8.25,7.68 1.56,1.56 19.93 0 1 10.4,8.46L 24,34.74 37.66,8.35a 1.53,1.53 162.36 0 1 2.06,-0.65c 0.72,0.37 0.99,1.29 0.61,2.04 -5.08,9.9 -9.84,19.02 -14.98,28.93 -0.25,0.48 -0.89,0.86 -1.43,0.84z"/> </svg> 新矢量图形： <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"> <path d="M 9,9 24,38 39,9"/> </svg> PS：可以说它们看起来一样。 我的逻辑告诉我，对于折线图来说，描边比填充要好得多，因为你得到的点更少。我可以说我将 380B 文件优化为 189B (~ 50%)，具有相同的质量。 现在我的问题是，如果我在浏览器中使 svg 变大，它们会保持不变，但在 Figma 中...如果我垂直和水平调整图形 a) (380B) 的大小，则线条的宽度会适应调整大小（即因为这些点才有意义），但如果我调整图表 b) (189B) 的大小，宽度保持不变，它不会变小或变大。正如你所看到的，我没有添加vector-effect =“non-scaling-中风”。为什么没有像调整大小这样的数学计算，我将宽度设置为2，它应该像32x32一样计算2，如果它的128x128 =>宽度应该是8 抱歉，如果我的问题看起来很愚蠢，也许这是figma中唯一的情况，我不知道。 我试图预期笔画宽度会放大 填充和描边是2种不同的绘制风格。 填充 填充（描边轮廓之间的所有内容）和描边绘制轮廓 并且您必须自己设置 stroke-width 属性。 如您在第一个 SVG 上设置红色描边时所见。我设置了stroke-width=2 <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="black" stroke="red" stroke-width="2"> <path d="M 24,39.51A 2.29,2.29 43.71 0 1 22.24,37.9L 7.67,9.73A 1.56,1.56 105.76 0 1 8.25,7.68 1.56,1.56 19.93 0 1 10.4,8.46L 24,34.74 37.66,8.35a 1.53,1.53 162.36 0 1 2.06,-0.65c 0.72,0.37 0.99,1.29 0.61,2.04 -5.08,9.9 -9.84,19.02 -14.98,28.93 -0.25,0.48 -0.89,0.86 -1.43,0.84z"/> </svg> SVG（单一）路径编辑器 将 d-path 复制到站点中 https://yqnn.github.io/svg-path-editor/# 它可能会变得更清晰一点
我试图将此 SVG 代码的背景更改为透明，但没有成功。我是 SVG 新手，不知何故我无法在谷歌上找到解决方案；有人可以帮忙吗？ 演示：http://jsfiddle.net/
我知道那里有图表库，但我想亲自创建我自己的自定义图表库。 我发现了另一个人的一些工作，他用 javascript 从数组创建了一个饼图，ex...
与标准html相比，使用react-native-svg的Svg图标看起来不一样
我以 svg 格式导出了一个在Figma中设计的图标，并将其复制到我的react-native项目中，如下所示，我为使其适应react-native-svg所做的唯一更改是在a行上使用大写字母...
如何直观地看到 Android 矢量可绘制 XML 中的图片？ 我反汇编了 Apk 文件，现在我想替换图标，但是如何在代码中直观地看到它们。有程序吗
当所有 svg 元素具有相同的属性和值时，在 selenium-java 中处理 Svg 元素而不使用索引位置
在我的应用程序中，我有 200 个具有相同属性和值的 svg 元素 (//*[name()='svg'][@class='tree-node-icon']) 但是当我定位一个 svg 元素时，它会被定位，因为我使用了索引 po...
我正在尝试链接背景：url(#myid);，id将是一个SVG元素。 这可能吗？难道我做错了什么？ .特别{ 宽度：100px...
这是我的基本 SVG： 这是我的基本 SVG： <div style="padding:0px; width:500px; height:100px; background-color:#cdc8c8;"> <svg width="100%" height="100%" viewBox="0 0 380 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> <g transform="matrix(0.979791,0,0,1.03566,-56.9337,-435.053)"> <rect x="58.108" y="420.073" width="387.838" height="28.967" style="fill:rgb(103,177,193);" /> </g> </svg> </div> 呈现为： 现在，如果我在 html 页面上写下相同的内容并使用以下代码导出 PDF： ConverterProperties converterProperties = new ConverterProperties(); converterProperties.SetBaseUri(AppDomain.CurrentDomain.BaseDirectory + "templates/report/"); using (var newFileStream = new FileStream(reportPathPDF, FileMode.Create)) { var pdfWriter = new PdfWriter(newFileStream); PdfDocument pdf = new PdfDocument(pdfWriter); pdf.SetDefaultPageSize(PageSize.A4); var document = HtmlConverter.ConvertToDocument(htmlContent, pdf, converterProperties); document.Close(); } 当我打开 PDF 时，结果如下： 为什么会这样？我哪里错了？ 如果我使用“展平”变换，也会发生同样的情况： <svg width="100%" height="100%" viewBox="0 0 380 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> <rect x="0" y="0" width="380" height="30" style="fill:rgb(103,177,193);"/> </svg> 你没有提到你正在使用的女巫版本，所以我将按照我在最新的8.0.4中看到的方式来解释它 问题在于 width 标签中的 height、svg 属性。 如果您查看日志记录，您将看到以下警告消息 com.itextpdf.styledxmlparser.css.util.CssDimensionParsingUtils ERROR Unknown absolute metric length parsed "%". 因此尚不支持它，因此要修复它，您可以使用周围环境的高度和宽度值div 类似这样的： <div style="padding:0px; width:500px; height:100px; background-color:#cdc8c8;"> <svg width="500px" height="100px" viewBox="0 0 380 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> <rect x="0" y="0" width="380" height="30" style="fill:rgb(103,177,193);"/> </svg> </div> 然后当我运行它时，它给出以下结果。我认为这正是您所期望的。 它似乎也适用于您的转换代码，您给出的第一个示例
问题：在 d3.js 中将 SVG 下载为图像后，SVG 图像不可见
问题描述： 我正在尝试创建一个包含从 URL（在本例中为 Unsplash）获取的图像的 SVG，并提供一个下载按钮以将 SVG 下载为图像 (PNG)。然而，一个...
我希望背景在svg下方有不同的颜色，在svg上方有不同的颜色，我设置为背景，我怎样才能实现这一点？
我想在 svg 下面有一个单独的背景颜色，在 svg 上面有一个单独的背景颜色。 请注意，我已经为 body 元素设置了背景图像，并且我将使用网格布局...
Flutter 在 CustomPaint (Canvas) 中绘制 SVG
我有这样的事情： 自定义油漆（ 画家：CurvePainter(), ） 在这堂课上我正在画画： 导入“包：flutter/material.dart”； 导入'包：flutter_svg/flutter_svg.d...
我想在 svg 中画一个模糊的圆圈，但是如果 stdDeviation 值较高，它会被裁剪。 我尝试了几个属性，例如“feGaussianBlur”标签上的“edgeMode”或“width =“150％”'和'...
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>