github svg 在 Markdown 中呈现为黑色矩形

Question

我的存储库中的 svg 图像在 Markdown 中呈现为黑色矩形。见https://github.com/petradewittevaneck/Signaleringskaart-ouderen/blob/NieuwOntwerp/README.md

当导航到the file itself 时，它会正确呈现（但是很小）

造成这种差异的原因是什么？当从markdown文件中引用图像然后直接显示图像时，是否在GitHub上使用了另一种渲染算法？

Answer 1

对于不是 GitHub 服务器管理员的任何人来说，这个问题可能都无法回答。在网址中可以看到sanitize=true：https://raw.githubusercontent.com/petradewittevaneck/Signaleringskaart-ouderen/NieuwOntwerp/Signaleringskaart%20ouderen.svg?sanitize=true

你的图片正在做的事情，GitHub sanitizer 不喜欢。

GitHub sanitizer 存在已知问题，请参阅 https://github.com/github/markup/issues/556

我很好地打印了你的两个 SVG，并在差异中找到了这个：

$ diff 1.svg 2.svg
1,2c1,2
< <?xml version="1.0"?>
< <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Laag_1" data-name="Laag 1" viewBox="0 0 436.54 612.28">
---
> <?xml version="1.0" encoding="UTF-8"?>
> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Laag_1" viewBox="0 0 436.54 612.28">
4d3
<     <style>.cls-1,.cls-20{fill:none;}.cls-2{fill:#e5f2ba;}.cls-3{font-size:32px;}.cls-24,.cls-3,.cls-31,.cls-38,.cls-6{fill:#3b4349;font-family:Calibri-Bold, Calibri;font-weight:700;}.cls-4{letter-spacing:-0.01em;}.cls-5{letter-spacing:-0.01em;}.cls-6{font-size:24px;}.cls-7{letter-spacing:-0.03em;}.cls-8{letter-spacing:-0.01em;}.cls-9{letter-spacing:-0.01em;}.cls-10{letter-spacing:-0.02em;}.cls-11{letter-spacing:-0.01em;}.cls-12{clip-path:url(#clip-path);}.cls-13{fill:#414e51;}.cls-14{clip-path:url(#clip-path-2);}.cls-15{clip-path:url(#clip-path-3);}.cls-16{clip-path:url(#clip-path-4);}.cls-17{clip-path:url(#clip-path-5);}.cls-18{clip-path:url(#clip-path-6);}.cls-19{clip-path:url(#clip-path-7);}.cls-20{stroke:#414e51;stroke-miterlimit:10;stroke-width:1.07px;}.cls-21{clip-path:url(#clip-path-8);}.cls-22{clip-path:url(#clip-path-9);}.cls-23{clip-path:url(#clip-path-10);}.cls-24{font-size:18px;}.cls-25{letter-spacing:-0.03em;}.cls-26{letter-spacing:-0.01em;}.cls-27{letter-spacing:-0.01em;}.cls-28{letter-spacing:0em;}.cls-29{letter-spacing:-0.01em;}.cls-30{letter-spacing:-0.02em;}.cls-31{font-size:22px;}.cls-32{letter-spacing:0em;}.cls-33{letter-spacing:-0.01em;}.cls-34{letter-spacing:-0.01em;}.cls-35{letter-spacing:-0.02em;}.cls-36{letter-spacing:-0.01em;}.cls-37{letter-spacing:-0.01em;}.cls-38{font-size:12px;}.cls-39{letter-spacing:-0.01em;}.cls-40{letter-spacing:-0.02em;}.cls-41{letter-spacing:-0.01em;}.cls-42{letter-spacing:-0.01em;}.cls-43{letter-spacing:-0.01em;}.cls-44{letter-spacing:-0.01em;}.cls-45{letter-spacing:-0.01em;}.cls-46{letter-spacing:-0.02em;}.cls-47{letter-spacing:-0.01em;}.cls-48{letter-spacing:-0.01em;}.cls-49{letter-spacing:-0.01em;}.cls-50{letter-spacing:-0.01em;}.cls-51{letter-spacing:-0.02em;}.cls-52{letter-spacing:-0.01em;}.cls-53{letter-spacing:-0.01em;}.cls-54{letter-spacing:-0.01em;}.cls-55{letter-spacing:-0.02em;}.cls-56{letter-spacing:-0.03em;}.cls-57{letter-spacing:0.01em;}.cls-58{letter-spacing:-0.03em;}.cls-59{letter-spacing:-0.01em;}.cls-60{letter-spacing:-0.02em;}.cls-61{letter-spacing:-0.06em;}</style>
126c125
<   <text class="cls-24" transform="translate(93.8 321.91)">Her<tspan class="cls-25" x="26.82" y="0">k</tspan><tspan x="34.99" y="0">e</tspan><tspan class="cls-26" x="44.05" y="0">n</tspan><tspan x="53.56" y="0">t u &#xE9;&#xE9;n </tspan><tspan class="cls-27" x="109.45" y="0">v</tspan><tspan class="cls-28" x="117.72" y="0">an d</tspan><tspan class="cls-29" x="149.99" y="0">e</tspan><tspan class="cls-30" x="158.87" y="0">z</tspan><tspan x="165.7" y="0">e signalen?</tspan></text>
---
>   <text class="cls-24" transform="translate(93.8 321.91)">Her<tspan class="cls-25" x="26.82" y="0">k</tspan><tspan x="34.99" y="0">e</tspan><tspan class="cls-26" x="44.05" y="0">n</tspan><tspan x="53.56" y="0">t u één </tspan><tspan class="cls-27" x="109.45" y="0">v</tspan><tspan class="cls-28" x="117.72" y="0">an d</tspan><tspan class="cls-29" x="149.99" y="0">e</tspan><tspan class="cls-30" x="158.87" y="0">z</tspan><tspan x="165.7" y="0">e signalen?</tspan></text>

在您的情况下，消毒剂似乎拒绝您的 CSS。