无法在svg的<defs>内部<use>

Question

我正在尝试复制模式，但是我希望复制的元素在<defs>之外。为什么不起作用？

  <svg width="750" height="750">
    <defs>
      <pattern id="pat" x="0" y="0" width="250" height="250">
        <use href="foo" x="0" y="0"></use>
      </pattern>
    </defs>
    <rect fill="url(#pat)" width="1000" height="500"></rect>
    <rect id="#foo" fill="red" width="15" height="15"></rect>
  </svg>

Answer 1

您可以使用patternUnits="userSpaceOnUse"

<svg width="750" height="750">
    <defs>
      <pattern id="pat" x="0" y="0" width="250" height="250" patternUnits="userSpaceOnUse">
        <use xlink:href="#foo" x="0" y="0"></use>
      </pattern>
    </defs>
    <rect fill="url(#pat)" width="1000" height="500"></rect>
    <rect id="foo" fill="red" width="15" height="15"></rect>
  </svg>