我有一个从Illustrator导出的SVG文件（交互式世界地图），我直接包含在网站的每个页面中。
这张地图有两个形状适用于每个大陆：一个完整的（填充黑色），另一个使用一个模式（每个区域都有一个不同的形状，填充黑色条纹）。单击一个大陆时，＆＃34;完整＆＃34;形状的不透明度设置为零，因此可以看到剥离的不透明度。
我的问题是当我在域根之外的其他网址上时，剥离的区域无法正确显示。在Firefox上，它们显然是不可见的;在Chrome上，它们与对手一样充满了黑色。
我很确定这与url(#SVGID_n_)引用条纹图案的事实有关（再一次，它在Illustrator中就像这样生成了，我不会＆＃ 39;真的非常关心优化它）。但是由于SVG直接注入我的页面，它应该能够找到引用的模式，无论URL。我应该修复什么才能让它在每一页都有效？
主页，其中一切都按预期工作：http://lesjeteursdencre.fr 发生错误的另一个页面：http://lesjeteursdencre.fr/2
要查看它，请点击底部带有脉动箭头的小行星，这将显示地图，然后点击任意大陆。
以下是问题出现次数的代码示例：
svg
<g id="europe-rayures">
<g>
<pattern id="SVGID_1_" xlink:href="#Nouveau_motif_4" patternTransform="matrix(1 0 0 1 45.2388 -5)"></pattern>
<path fill="url(#SVGID_1_)" d="..." />
</g>
</g>
注意：到目前为止，我在Firefox和Chrome（都在Linux上）进行了测试。根据您的浏览器，可能存在其他不相关的视觉问题，请忽略它们，因为我的测试尚未完成。
答案 0 :(得分：5)
您有<base>标记干扰了网址解析（正如它应该做的那样）。删除它，一切都应该工作。