模式ID填充的SVG路径不适用于非根URL

Question

我有一个从Illustrator导出的SVG文件(交互式世界地图),我直接包含在网站的每个页面中.

这张地图有两个形状适用于每个大陆:一个完整​​的(用黑色填充),另一个使用一个模式(每个区域都有一个不同的形状,充满黑色条纹).单击一个大陆时,"完整"形状的不透明度设置为零,因此可以看到剥离的形状.

我的问题是当我在另一个URL而不是域根目录时,剥离区域无法正确显示.在Firefox上,它们显然是不可见的; 在Chrome上,他们完全充满黑色,就像他们的对手一样.

我很确定它与我引用条纹图案的事实有关url(#SVGID_n_)(再一次,它已经在Illustrator中生成了这样,我真的不关心优化它).但是由于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上)上进行了测试.根据您的浏览器可能存在其他不相关的视觉问题,请忽略它们,因为我的测试尚未完成.

Answer 1

你有一个<base>干扰URL解析的标签(正如它应该做的那样).删除它,一切都应该工作.