svg 标签内的图像未渲染？

我创建了一个 svg 图像。它包含一个 标签，该标签接收图像的公共 url。这个 svg 在浏览器（Chrome 和 Firefox 或任何在线 SVG 渲染器）中完美呈现，但是当我在 GitHub 中使用这个 svg 时，图像未渲染.

以下是代码：

<svg  width='20%' height='20%' viewBox="0 0 250 110" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" >
            <defs>
                <pattern id="image" x="0%" y="0%" height="100%" width="100%"
                        viewBox="'0' '0' '50%' '80%'">
                <image x="0%" y="0%" width="20%" height="50%" xlink:href="//userpic.codeforces.com/584918/avatar/6cd76f3a06f64685.jpg" preserveAspectRatio="xMidYMid slice"></image>
                </pattern>
            </defs>


            <rect x="0" y="0" width="100%" height="100%" fill="#FFFFFF" stroke='cyan' stroke-width="7"></rect>

           
            <g>
<circle id="sd" class="medium" cx="85%" cy="55%" r="13%" fill="url(#image)" stroke='cyan' stroke-width="3" /></g>
</svg>

有没有解决方案，以便我们可以正确渲染 svg（与图像）github-自述文件还有？

只要该 SVG 包含指向外部站点的链接，您就无法在 GitHub 上呈现该 SVG。 GitHub 使用一个名为Content-Security-Policy，它告诉浏览器可以安全地从哪些域加载各种类型的资源（包括图像）。此标头的目的是通过防止从不受信任的站点加载潜在有害或恶意内容来提高安全性。

GitHub 使用此标头对可以加载图像的站点进行限制，并代理大多数图像本身。这显着提高了性能，但也阻止了不道德的存储库所有者跟踪用户，这对用户和 GitHub 来说都是不可取的。

浏览器被告知该域不受信任，因此无论如何它都不会从该域加载任何数据。没有办法解决这个问题，这是设计使然的。

您可以尝试将该 JPEG 嵌入为data:URL，可能有效也可能无效，但这将是您能够在 SVG 中嵌入另一个对象的唯一方法。