SVG中<defs>内使用<use>失效？图案复用问题求助

哈哈，这个问题我之前也踩过坑！咱们一步步来拆解你的问题：

问题1：ID的写法犯了基础错误 #

你代码里的 <rect id="#foo" 是错的！ID属性值本身不需要加#，#只是CSS选择器或者SVG引用时用来标识ID的前缀。所以正确的写法应该是 <rect id="foo" ...>，对应的 <use> 标签的href也得补上#，写成 href="#foo"（你原来的href="foo"少了#，浏览器根本找不到目标元素）。

问题2：元素解析顺序导致引用失败 #

就算修正了ID，你大概率还是看不到效果——这是因为SVG元素是从上到下顺序解析的：你的<pattern>定义在<defs>里，而被引用的<rect id="foo">却写在了<pattern>的后面。当浏览器解析到<pattern>里的<use href="#foo">时，#foo这个元素还没被创建出来，自然没法引用到。

另外补充个SVG的隐性规则：虽然规范没强制要求被复用元素必须放<defs>里，但<defs>就是专门用来存放「只供引用、不直接渲染」的元素的，放在这里不仅是最佳实践，还能避免很多作用域或顺序问题。如果你非要把元素放在<defs>外面，必须把它放在引用它的<pattern>定义之前，这样浏览器解析到<use>时，目标元素已经存在了。

修正后的代码示例 #

先看把元素放在<defs>外但调整顺序的写法：

<svg width="750" height="750">
  <!-- 把被引用元素移到pattern定义之前 -->
  <rect id="foo" fill="red" width="15" height="15"></rect>
  <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>
</svg>

更推荐的规范写法是把可复用元素放进<defs>里：

<svg width="750" height="750">
  <defs>
    <!-- 可复用元素统一放在defs里管理 -->
    <rect id="foo" fill="red" width="15" height="15"></rect>
    <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>
</svg>

这样就能正常显示红色小方块重复的图案啦！

内容的提问来源于stack exchange，提问作者wildeyes