SVG pattern元素仅显示首个子元素的技术问题求助

嘿，其实你对SVG Pattern的核心功能理解没偏差——它完全可以容纳多个子元素来构建重复图案！你遇到的问题，根源是一个很容易忽略的XML语法细节：你没有正确闭合<rect>标签。

看你贴的示例代码：

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="contain: strict;"> 
  <defs> 
    <pattern id="pattern-frontend" patternUnits="userSpaceOnUse" width="4" height="4"> 
      <rect x="3" y="3" width="1" height="1" fill="green"> 
      <rect x="0" y="0" width="2" height="2" fill="currentcolor" style="fill: var(--color-accent-300)"> 
    </pattern> 
  </defs> 
</svg>

SVG遵循XML语法规则，所有元素必须正确闭合：要么用自闭合写法<rect ... />，要么加上对应的结束标签</rect>。你现在的写法里，第二个<rect>会被浏览器解析成第一个<rect>的子元素，但<rect>是不能包含子元素的基础图形元素，所以浏览器直接把它忽略了。

修正后的代码示例 #

只要把标签正确闭合，两个矩形就能正常显示了：

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="contain: strict;"> 
  <defs> 
    <pattern id="pattern-frontend" patternUnits="userSpaceOnUse" width="4" height="4"> 
      <!-- 用自闭合写法 -->
      <rect x="3" y="3" width="1" height="1" fill="green" /> 
      <!-- 或者加结束标签 -->
      <rect x="0" y="0" width="2" height="2" fill="var(--color-accent-300)"></rect> 
    </pattern> 
  </defs>
  <!-- 可以加个矩形来预览图案效果 -->
  <rect width="100%" height="100%" fill="url(#pattern-frontend)" />
</svg>

扩展：制作更复杂的Pattern #

如果要做复杂图案，你还可以用<g>把元素分组，或者加入<circle>、<path>等其他SVG元素，只要保证所有标签都正确闭合就行。举个例子：

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="contain: strict; width: 200px; height: 200px;"> 
  <defs> 
    <pattern id="complex-pattern" patternUnits="userSpaceOnUse" width="8" height="8"> 
      <!-- 先加背景矩形 -->
      <rect width="8" height="8" fill="#f5f5f5" />
      <!-- 用g分组管理图案元素 -->
      <g fill="#2196F3">
        <circle cx="2" cy="2" r="1" />
        <circle cx="6" cy="6" r="1" />
        <path d="M4 1 L7 4 L4 7 L1 4 Z" />
      </g>
    </pattern> 
  </defs>
  <rect width="100%" height="100%" fill="url(#complex-pattern)" />
</svg>

总结你的误区 #

你对SVG Pattern的功能认知是对的——它支持多子元素构建重复图案，问题只是犯了一个基础的XML语法错误：未正确闭合元素标签，导致浏览器解析时出现逻辑错误，把后续元素当成了前一个元素的子节点，最终被忽略。

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