如何使用符号和SVG clipPath

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规范：

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

'clipPath'元素可以包含'path'元素，'text'元素，基本形状（如'circle'）或'use'元素。如果'use'元素是'clipPath'元素的子元素，则它必须直接引用'path'，'text'或基本形状元素。间接引用是一个错误