为何从Jupyter复制的SVG代码在HTML文件中无法显示？

你的SVG内容看不到，核心原因是所有文本、线条的颜色都是白色（#FFFFFF），而浏览器默认背景也是白色，两者重叠导致视觉上无法分辨。Jupyter通常使用深色主题，所以输出的SVG会用白色元素适配，但复制到独立HTML文件后，就会出现这个问题。

修复方法 #

方法1：修改元素颜色为深色 #

把SVG中所有fill="#FFFFFF"和stroke="#FFFFFF"替换为fill="#000000"（黑色）或其他深色，这样就能在白色背景下显示。修改后的完整代码如下：

<svg width="600" height="300" viewBox="0 0 600 300" xmlns="http://www.w3.org/2000/svg">
<text x="300" y="9" dy="0.76em" text-anchor="middle" font-family="Consolas" font-size="9.67741935483871" opacity="1" fill="#000000" font-weight="bold">    adfdaf</text>
<polyline fill="none" opacity="1" stroke="#000000" stroke-width="1" points="75,264 248,143 421,22 "/>
<polyline fill="none" opacity="1" stroke="#000000" stroke-width="1" points="74,22 74,264 "/>
<text x="65" y="264" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#000000">1.00</text>
<polyline fill="none" opacity="1" stroke="#000000" stroke-width="1" points="69,264 74,264 "/>
<text x="65" y="240" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#000000">1.20</text>
<polyline fill="none" opacity="1" stroke="#000000" stroke-width="1" points="69,240 74,240 "/>
<text x="65" y="216" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#000000">1.40</text>
<polyline fill="none" opacity="1" stroke="#000000" stroke-width="1" points="69,216 74,216 "/>
<text x="65" y="192" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#000000">1.60</text>
<polyline fill="none" opacity="1" stroke="#000000" stroke-width="1" points="69,192 74,192 "/>
<text x="65" y="168" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#000000">1.80</text>
<polyline fill="none" opacity="1" stroke="#000000" stroke-width="1" points="69,168 74,168 "/>
<text x="65" y="143" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#000000">2.00</text>
<polyline fill="none" opacity="1" stroke="#000000" stroke-width="1" points="69,143 74,143 "/>
<text x="65" y="119" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#000000">2.20</text>
<polyline fill="none" opacity="1" stroke="#000000" stroke-width="1" points="69,119 74,119 "/>
<text x="65" y="95" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#000000">2.40</text>
<polyline fill="none" opacity="1" stroke="#000000" stroke-width="1" points="69,95 74,95 "/>
<text x="65" y="71" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#000000">2.60</text>
<polyline fill="none" opacity="1" stroke="#000000" stroke-width="1" points="69,71 74,71 "/>
<text x="65" y="47" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#000000">2.80</text>
<polyline fill="none" opacity="1" stroke="#000000" stroke-width="1" points="69,47 74,47 "/>
<text x="65" y="22" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#000000">3.00</text>
<polyline fill="none" opacity="1" stroke="#000000" stroke-width="1" points="69,22 74,22 "/>
<polyline fill="none" opacity="1" stroke="#000000" stroke-width="1" points="75,265 594,265 "/>
<text x="75" y="275" dy="0.76em" text-anchor="middle" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#000000">2020</text>
<polyline fill="none" opacity="1" stroke="#000000" stroke-width="1" points="75,265 75,270 "/>
<text x="421" y="275" dy="0.76em" text-anchor="middle" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#000000">0104</text>
<polyline fill="none" opacity="1" stroke="#000000" stroke-width="1" points="421,265 421,270 "/>
</svg>

方法2：给SVG添加深色背景 #

如果想保留白色元素，可以给SVG添加背景色，比如在<svg>标签里加style="background-color: #333333"，示例：

<svg width="600" height="300" viewBox="0 0 600 300" xmlns="http://www.w3.org/2000/svg" style="background-color: #333333">
<!-- 原SVG内容不变 -->
</svg>

另外，建议把SVG放在完整的HTML结构中，确保浏览器正确解析：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Figure</title>
</head>
<body>
<!-- 这里放修改后的SVG代码 -->
</body>
</html>

内容的提问来源于stack exchange，提问作者dfadfdff