Question

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

以下内容在Firefox上不起作用，但如果您在标题中的res = "" for (k1,k2) in r: if (k1 < 42 and k2 > 42): res = r[(k1,k2)] print(res)标记之间放置相同的css，它就会出现！

<style>

其中'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>

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

Answer 1

在style.css中：

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

如何在Firefox中使用外部链接的SVG clippath

1 个答案: