如何使用带有符号和 <use> 的 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

A ‘clipPath’ element can contain ‘path’ elements, ‘text’ elements, basic shapes (such as ‘circle’) or a ‘use’ element. If a ‘use’ element is a child of a ‘clipPath’ element, it must directly reference ‘path’, ‘text’ or basic shape elements. Indirect references are an error

如何使用带有符号和 <use> 的 SVG clipPath

How to use SVG clipPath with symbols and <use>

svg

clip-path