Question

给出一个SVG文件：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="60" height="40" xmlns="http://www.w3.org/2000/svg" id="clipped">
  <defs>
    <clipPath id="myClip">
      <circle cx="35" cy="20" r="10"/>
      <circle cx="25" cy="20" r="10"/>
    </clipPath>
  </defs>

  <rect x="5" y="5" width="50" height="30" fill="red"
  clip-path="url(#myClip)"/>
</svg>

如果该文件作为外部use包含在以下HTML中：

<!doctype HTML>
<hmtl>
  <head>
    <meta charset="utf8">
  </head>
  <body>
      <svg viewBox="0 0 60 120">
        <use href="above.svg#clipped" x="0" y="0"></use>
    </svg>
  </body>
</html>

<clipPath>s部分中的<def>会被忽略/不包括在内，因此会显示一个纯红色矩形，而不是被裁剪以显示重叠的圆圈。

我不知道为什么会发生这种情况或如何使其不发生。我担心这是按预期工作但我无法找到任何来源（明确或其他）解释为什么会发生这种情况。

谷歌或搜索StackOverflow是一个令人惊讶的困难，因为它给出了解释问题及其重载意义所需的术语。

我也有demo of the problem here。

SVG <defs>不包括在<use>的外部目标中

0 个答案: