如何在SVG内部对嵌入的SVG进行裁剪？

问题描述 #

将外部SVG（box.svg）通过<image>标签嵌入主SVG后，添加clip-path属性时蓝色矩形消失，移除属性则正常显示。已尝试调整viewBox、clipPathUnits及xmlns但未解决。

相关代码 #

box.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="32" height="32">
  <rect x="0" y="0" width="100" height="100" fill="blue"></rect>
</svg>

test.html

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <svg width="200" height="200" viewbox="0 0 200 200">
    <defs>
      <clip-path id="cliparea">
        <polygon points="95 43 104 43 151 123 146 132 53 132 48 123"></polygon>
      </clip-path>
    </defs>
    <polygon stroke="#0F0" points="95 43 104 43 151 123 146 132 53 132 48 123" id="poly-gitea"></polygon>
    <image x="60" y="60" width="80" height="80" clip-path="url(#cliparea)" href="/box.svg"></image>
  </svg>
</body>
</html>

解决方案 #

核心问题是裁剪路径的坐标系与<image>元素的显示区域不匹配，可通过两种方式修复：

方式1：修改clipPathUnits并转换裁剪路径坐标 #

将裁剪路径的坐标系改为相对于<image>元素的边界框（0,0 到 1,1），同时把多边形点转换为相对比例值：

<svg width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <clip-path id="cliparea" clipPathUnits="objectBoundingBox">
      <!-- 坐标转换规则：(原坐标 - image元素位置)/image元素尺寸 -->
      <polygon points="0.4375 0.275 0.55 0.275 1.1375 0.75 1.075 0.8875 0.0625 0.8875 0 0.75"></polygon>
    </clip-path>
  </defs>
  <polygon stroke="#0F0" points="95 43 104 43 151 123 146 132 53 132 48 123" id="poly-gitea"></polygon>
  <image x="60" y="60" width="80" height="80" clip-path="url(#cliparea)" href="/box.svg"></image>
</svg>

方式2：调整<image>元素位置匹配裁剪路径 #

保留默认的userSpaceOnUse坐标系，将<image>元素的位置和尺寸调整为覆盖裁剪路径区域：

<image x="48" y="43" width="103" height="89" clip-path="url(#cliparea)" href="/box.svg"></image>

参数说明：x取裁剪路径最小x值48，y取最小y值43，width为最大x-最小x=151-48=103，height为最大y-最小y=132-43=89。

额外注意点 #

• SVG属性区分大小写，主SVG中的viewbox需改为viewBox，避免坐标系解析异常；
• 确认box.svg的加载路径正确，可通过浏览器控制台检查资源是否加载成功。

内容的提问来源于stack exchange，提问作者robbie.huffman