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://docs.python.org/3/howto/argparse.html

“ clipPath”元素可以包含“路径”元素，“文本”元素，基本形状（例如“圆圈”）或“使用”元素。如果“ use”元素是“ clipPath”元素的子元素，则它必须直接引用“ path”，“ text”或基本形状元素。 间接引用是错误

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

1 个答案: