如何让外部链接的 SVG 剪辑路径在 Firefox 中工作答案

【问题标题】：How to get externally linked SVG clippath working in Firefox如何让外部链接的 SVG 剪辑路径在 Firefox 中工作
【发布时间】：2016-02-09 08:36:22
【问题描述】：

我已经成功地在其他浏览器中基于样式名称在 SVG 中使用了 clip-path，但是当 Firefox 中从外部样式表使用“clip-path”CSS 属性时，它没有任何效果。

Example of it working in a jsfiddle

以下内容在 Firefox 上不起作用，但如果你在标题中的 <style> 标签之间放置相同的 css，它会的！

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class='svgWrapper' style='float:left; border:1px solid black; line-height:0px;'>
      <svg width="200" height="200" viewPort="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <clipPath id="myClip">
            <circle cx="100" cy="100" r="100"/>
          </clipPath>
        </defs>
        <rect class="foo" fill="DeepSkyBlue" x="0" y="0" width="200" height="200" />    
      </svg>
    </div>
  </body>
</html>

'style.css' 包含在哪里

.foo{
  clip-path: url(#myClip);
}

这是一个具有现有基础架构的大型项目的一部分，我不能简单地为内联样式或在内部拥有我的样式表，但我需要它才能在 Firefox 中工作。任何帮助将不胜感激。

【问题讨论】：

标签： html css firefox svg

【解决方案1】：

在 style.css 中：

.foo {
  clip-path: url(pagename.html#myClip);
}

【讨论】：

谢谢，虽然这在我在这里给出的简化示例中确实有效，但在我的实际问题中，我不知道包含样式表的许多页面的名称。有什么建议吗？
我的建议是像<rect style="clip-path: url(#myClip);"... 那样“内联”，但你说这在整个项目中是不可能的。所以，目前，我不知道。但如果我有解决这个问题的想法，我会在这里给你打电话。
我找到了一种不需要#target 的替代方法，但不幸的是在 Mozilla 上也不起作用 =( 你可以在 Chrome 上查看结果：.foo { -webkit-clip-path: circle(100px at 100px 100px);}