由模式 id 填充的 SVG 路径不适用于非根 URL
Posted
技术标签:
【中文标题】由模式 id 填充的 SVG 路径不适用于非根 URL【英文标题】：SVG path filled by pattern id not working on non-root URLs 【发布时间】：2014-12-28 18:17:50 【问题描述】：我有一个从 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 上）上对其进行了测试。根据您的浏览器，可能还有其他不相关的视觉问题，请忽略它们，因为我的测试尚未完成。
【问题讨论】：
【参考方案1】：您有一个<base> 标签，它干扰了 URL 解析（正如它应该做的那样）。删除它，一切都会正常。
【讨论】：
天啊，我怎么没想到呢？先生非常感谢您。出于好奇，据您所知，有没有什么方法可以在不需要删除<base> 标签的情况下克服这个问题？
使用绝对 URL 而不是相对 URL。
我以前尝试过这样做，使用类似于<path fill="url(http://my/url#svg_id)"> 的东西，但它仍然没有用，尽管它会很有意义。没关系，再次感谢！
从观察者的上下文来看，这个答案毫无意义。
我遇到了同样的问题。我的应用程序正在运行，并且我将基本标记设置为“/”。在我的app.com/dashboard 页面上，我必须将填充 URL 分配给 fill="('dashboard#soft-gradient')"以上是关于由模式 id 填充的 SVG 路径不适用于非根 URL的主要内容，如果未能解决你的问题，请参考以下文章