SVG <rect>元素mask条纹图案未成功应用问题求助

问题根源 #

1. Mask未覆盖目标元素区域：你的SVG viewBox设置为150 0 298 34，内部坐标系x范围是150到448，y范围0到34。但mask中的<rect>起始x为0，这个位置不在SVG可视范围内，导致x=440、445的目标rect无法被mask覆盖，条纹图案自然无法显示。
2. SVG属性名不规范：pattern的patternunits和patterntransform应为驼峰式的patternUnits和patternTransform，遵循SVG规范能避免兼容问题。

修复后的代码 #

CSS

.green-class {
  fill: green;
  mask: url(#mask-stripe) !important;
}

HTML

<svg class="availability-time-line-graphic" id="uptime-component-dbl6mg39xr0j" preserveAspectRatio="none" height="34" viewBox="150 0 298 34">
  <defs>
    <pattern id="pattern-stripe" width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
      <rect width="2" height="4" fill="white"></rect>
    </pattern>
    <mask id="mask-stripe">
      <!-- 调整rect位置和尺寸，覆盖SVG整个可视区域 -->
      <rect x="150" y="0" width="298" height="34" fill="url(#pattern-stripe)"></rect>
    </mask>
  </defs>
  <rect height="34" width="3" x="440" y="0" fill="#2fcc66" class="uptime-day component-dbl6mg39xr0j day-88 green-class" data-html="true"></rect>
  <rect height="34" width="3" x="445" y="0" fill="#2fcc66" class="uptime-day component-dbl6mg39xr0j day-89 green-class" data-html="true"></rect>
</svg>

补充说明 #

如果不想硬写数值，也可以给mask添加maskUnits="userSpaceOnUse"属性，同时将mask内的rect设置为width="100%" height="100%"，这样rect会自动匹配SVG的可视区域尺寸：

<mask id="mask-stripe" maskUnits="userSpaceOnUse">
  <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)"></rect>
</mask>

不过这种方式需要确保SVG的坐标系设置正确，避免出现偏移。

内容的提问来源于stack exchange，提问作者Kai-Eiji