如何将 SVG ClipPath 与符号和 <use> 一起使用

Question

我有以下有效的 SVG：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <defs>
    <symbol id="triangle" class="triangle" viewBox="0 0 100 100" preserveAspectRatio="none">
      <polygon points="0,100 50,0 100,100" stroke="none" />
    </symbol>

    <symbol id="rect" viewBox="0 0 100 100" preserveAspectRatio="none">
      <rect width='100' height='100' stroke="none"/>
    </symbol>
  </defs>

  <use xlink:href="#rect" width="300" height="300" x="100" y="100"/>
  <use xlink:href="#triangle" width="120" height="150" x="180" y="100" fill="white" transform="rotate(180, 250, 175)"/>
</svg>

但当我尝试将其变成一个时，clipPath它却变成空白。想知道如何去clipPath上班。这是我尝试过的。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <defs>
    <symbol id="triangle" class="triangle" viewBox="0 0 100 100" preserveAspectRatio="none">
      <polygon points="0,100 50,0 100,100" stroke="none" />
    </symbol>

    <symbol id="rect" viewBox="0 0 100 100" preserveAspectRatio="none">
      <rect width='100' height='100' stroke="none"/>
    </symbol>
    
    <clipPath id="clip">
      <use xlink:href="#triangle" width="120" height="150" x="180" y="100" fill="white" transform="rotate(180, 250, 175)"/>
    </clipPath>
  </defs>

  <use xlink:href="#rect" width="300" height="300" x="100" y="100" clip-path="url(#clip)"/>
</svg>

目标是让它在使用该<use>功能时从矩形中切出三角形。稍后我可能会有一个更复杂的剪切路径示例，这只是说明了问题。

Answer 1

来自 SVG 规范：

\n\n

https://www.w3.org/TR/SVG11/single-page.html#masking-EstablishingANewClippingPath

\n\n

\n

\xe2\x80\x98clipPath\xe2\x80\x99 元素可以包含 \xe2\x80\x98path\xe2\x80\x99 元素、\xe2\x80\x98text\xe2\x80\x99 元素、基本形状（例如 \ xe2\x80\x98circle\xe2\x80\x99) 或 \xe2\x80\x98use\xe2\x80\x99 元素。如果 \xe2\x80\x98use\xe2\x80\x99 元素是 \xe2\x80\x98clipPath\xe2\x80\x99 元素的子元素，则它必须直接引用 \xe2\x80\x98path\xe2\x80\x99 、\xe2\x80\x98text\xe2\x80\x99 或基本形状元素。间接引用是错误的

\n

\n