将svg clipPath元素移动到公共defs标记中

Question

我正在使用clipPath元素在SVG的末尾获得一个有角度的点。由于可见svg需要响应，#rightarrow需要为100％（由use元素定位）。我试图将clipPath#rightarrow元素移到公共defs中以避免重复的id和膨胀的代码。

当我将clipPaths移动到公共defs时，可见的SVG不会像它们那样呈现。

<!-- COMMON DEFS -->
<svg width="0" height="0" style="position: absolute">
  <defs>
    <pattern id="pattern" width="6" height="10" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
      <line stroke="black" stroke-width="5px" y2="10"></line>
    </pattern>
    <path id="rightarrowpath" d="M-6,0 L0,10 L-6,20 L-5000,20 L-5000,0 Z"></path>
  </defs>
</svg>

<div style="width: 75%;">
  <svg width="100%" height="20px">
     <defs>
     <!-- MOVE THIS TO COMMON DEFS? -->
      <clipPath id="rightarrow">
        <use xlink:href="#rightarrowpath" x="100%"></use>
      </clipPath>
    </defs>
    <rect width="100%" height="100%" fill="red" clip-path="url(#rightarrow)"></rect>
  </svg>
</div>

<div style="width: 20%;">
  <svg width="100%" height="20px">
    <defs>
      <!-- MOVE THIS TO COMMON DEFS? -->
      <clipPath id="rightarrow">
        <use xlink:href="#rightarrowpath" x="100%"></use>
      </clipPath>
    </defs>
    <rect width="100%" height="100%" fill="url(#pattern)" clip-path="url(#rightarrow)"></rect>
  </svg>
</div>

如何在常见的defs中移动clipPath？