SVG xlink：.jpg的href路径无法正常工作（在我的网站项目中）[重复]

Posted 2021-03-29

这个问题在这里已有答案：

• Images in SVG Image tags not showing up in Chrome, but displays locally? 3回答

为什么，当我在浏览器中单独打开我的.svg文件时，它会显示来自xlink：href的图片，但在我的网站项目中它没有显示来自xlink：href的图片？

这是来自xlink：href - > https://s10.postimg.org/ky5y39vvd/Untitled-19.png的图片

在我的网站项目中，我使用img标签或background-image链接到我的.svg文件...

关键是我想要.svg文件在我的网站项目中工作:)

这是我的SVG文件：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
    <title>Text Pattern Fill Example</title>
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="120" height="140">
            <image xlink:href="https://s10.postimg.org/e2h45vefd/alex-iby.jpg" x="0" y="0" width="120" height="300"
             transform="translate(135.780723, 50.780723) rotate(90.000000) translate(-55.780723, -60.780723)"
             /><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
        </pattern>
    </defs>

        <path d="M59.2078786,111.129597 C101.335439,132.142715 115.952158,85.5158857 115.952158,53.9197716 C115.952158,22.3236576 102.07475,5.17108475 70.7357496,5.17108475 C39.3967496,5.17108475 13.4042112,19.8971044 -0.939389391,40.9853457 C-15.28299,62.0735871 17.0803178,90.1164792 59.2078786,111.129597 Z"  transform="translate(55.780723, 60.780723) rotate(-90.000000) translate(-55.780723, -60.780723) " fill="url(#img1)"></path>        
</svg>

答案

该问题涉及阻止从其他域加载外部URL的安全规则。如果您要从您的网站“内”加载该光栅图像 - 浏览器将允许它。

但这可以在您的localhost中使用，这在浏览器中是允许的。

有关相关上下文，请参阅此文章：https://medium.com/the-ui-files/load-svgs-from-different-domains-ports-protocols-1614e1af6101