本地测试：引用外部SVG时clip-path属性失效问题排查

我正在学习使用SVG路径裁剪图片，为简化测试在本地桌面环境开展。使用Safari浏览器时，发现引用文档内的SVG clipPath可正常生效，但引用同目录下独立SVG文件（test.svg）中的#myClip时，设置clip-path: url(test.svg#myClip)完全失效。已尝试添加浏览器前缀但无效果，希望解决该问题以实现外部SVG的引用需求。

场景代码示例 #

内嵌SVG的HTML代码 #

<style type="text/css">
img#image-24 {
    clip-path: url(#myClip);
}
</style>

</head>

<body>
    <center>
    <img id="image-24" src="home-adults.jpg" width="600" height="310">
    </center>
    <svg width="0" height="0">
      <defs>
        <clipPath id="myClip">
          <circle cx="100" cy="100" r="40"/>
          <circle cx="60" cy="60" r="40"/>
        </clipPath>
      </defs>
    </svg>
</body>

独立test.svg文件代码 #

<svg width="0" height="0">
<defs>
<clipPath id="myClip">
<circle cx="100" cy="100" r="40"/>
<circle cx="60" cy="60" r="40"/>
</clipPath>
</defs>
</svg>

解决方法 #

• 用<object>预加载外部SVG
  在HTML的<body>中添加隐藏的<object>标签加载外部SVG，让Safari能识别到其中的clipPath定义：

<object data="test.svg" type="image/svg+xml" style="display: none;"></object>

之后CSS里的clip-path: url(test.svg#myClip)即可正常生效。

• 临时转为内联SVG
  本地测试时，直接把test.svg的内容复制到HTML页面的<svg>标签内，这种方式兼容性拉满，不会有外部资源加载的限制问题。

• 启动本地HTTP服务器（推荐）
  Safari对file://协议下的本地文件资源引用限制严格，启动简单本地服务器后通过HTTP协议访问页面：

  • Python 3执行：python -m http.server
  • Python 2执行：python -m SimpleHTTPServer
    访问http://localhost:8000打开你的页面，外部SVG的clipPath引用就能正常工作。

内容的提问来源于stack exchange，提问作者Adam Abrams