如何一起使用 SVG 滤镜和 <base> 标签答案

【问题标题】：How to use SVG filters and <base> tag together如何一起使用 SVG 滤镜和 <base> 标签
【发布时间】：2015-12-23 22:12:44
【问题描述】：

以下代码适用于“页面 URL”==“基本 URL”的主页

但在任何其他页面上失败

<svg>
  <filter id="blur">
    <feGaussianBlur stdDeviation="5"></feGaussianBlur>
  </filter>

  <image id="svg-image" xmlns:href="http://x.com/image.jpg"       
         filter="url(#blur)">
  </image>
</svg>

有没有办法从外部 svg 文件中引用“仅过滤器”？

例如：

1.外部文件@(http://localhost/somewhere/external.svg)

<svg>
  <filter id="blur">
    <feGaussianBlur stdDeviation="5"></feGaussianBlur>
  </filter>
</svg>

2.HTML文档@(http://localhost/elsewhere)

<svg>
  <image id="svg-image" xmlns:href="http://x.com/image.jpg"       
         filter="url(/somewhere/external.svg#blur)">
  </image>
</svg>

【问题讨论】：

参考标题，可能最好不要这样做。
@RobertLongson 我的困境是 SVG 仅用于一个地方（但必要），而 BASE 则在整个站点范围内使用。所以我只想有一个解决方法，如果可能的话？
停止使用 base 或停止使用过滤器（或剪辑路径或标记或掩码）或停止使用 Chrome（或 IE、Safari 或 Opera）。
@RobertLongson 非常好，谢谢！
您的另一种选择是将所有 SVG 移动到单个独立文件中，然后通过 <object> 或 <iframe> 标签将其嵌入，以便 <base> 标签位于不同的文档中，然后不会影响 SVG。

标签： html google-chrome svg filter blur

【解决方案1】：

在url() 中使用文件名应该可以。特别是如果您正在引用当前文件。这将解决您使用<base> 的问题。

但并非所有浏览器都支持指向另一个文件（目前）。

顺便说一句，您的xmlns:xlink 属性是错误的。那应该是xlink:hef=""。

【讨论】：

其实原来是 xmlns:href="" ，我把它和 w3 参考链接混在一起，同时删除让它看起来更小。
不，它不起作用。我有 mod_rewrite （问题？），但它甚至不适用于绝对参考。 svg过滤器定义有问题吗？
@user3380710 不，正如答案中所述，并非所有浏览器都支持它。例如，Firefox 支持，但 Chrome 只支持 some 过滤器，我不知道哪些过滤器，也许高斯模糊不是其中之一。最好的办法是停止使用<base> 标签。

【解决方案2】：

只是不要|| ！可能

（由@RobertLongson 和@PaulLeBeau 建议）

【讨论】：