使用`<use>`元素时如何为SVG图案着色？

你的SVG出现空白矩形仅显示边框的核心问题有两个：

• 定义的斜条纹<pattern>中，<path>未设置stroke颜色，导致条纹完全无法显示
• 你在<use>上设置的stroke是给整个矩形添加边框，并非填充条纹的颜色

要实现每个矩形带对应颜色的斜条纹填充，可通过**currentColor继承颜色**的方式复用pattern，同时调整结构确保颜色正确传递：

修改后的代码 #

<svg width="100%" viewBox="0,0,100,100" >
  <defs>
    <pattern id="strip" viewBox="0,0,1,1"
      width=".25" height=".5"
      stroke-width="0.1"
      patternContentUnits="userSpaceOnUse"
    >
      <!-- 用currentColor让条纹颜色继承父元素的color属性 -->
      <path d="M0,0 l1,1" stroke="currentColor" />
    </pattern>
    
    <symbol id="stripe-rect">
      <rect x="0" y="0" width="100%" height="100%" fill="url(#strip)" />  
    </symbol>
  </defs>

  <!-- 通过color属性设置条纹颜色，如需边框可额外添加stroke属性 -->
  <use href="#stripe-rect" width="50" height="25" color="red" />
  <use href="#stripe-rect" y="30" width="50" height="25" color="green" />
  <use href="#stripe-rect" y="60" width="50" height="25" color="yellow" />
</svg>

关键修改说明 #

• 给pattern内的<path>添加stroke="currentColor"，让条纹颜色能从使用它的元素处继承
• 在<pattern>中加入patternContentUnits="userSpaceOnUse"，确保条纹的尺寸和间距在不同大小的矩形上保持一致（优化显示效果的可选配置）
• 将<use>上的stroke替换为color，使颜色传递给pattern内的条纹，而非仅作为矩形边框色

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