蒙版未应用于 SVG <rect>

Question

我想在我的html中应用条带模式到<rect>元素，但是看起来该模式没有被应用。

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

<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" transform="translate(0,0)" fill="white"></rect>
</pattern>
<mask id="mask-stripe">
<rect x="0" y="0" width="100%" height="100%" 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>

Answer 1

如果您在<pattern>上设置viewBox属性，则更容易控制模式。

我还改变了<svg>的viewBox和<rect>的位置和大小。我不清楚你想要达到什么目标。

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

<svg height="200" viewBox="0 0 50 50">
<defs>
<pattern id="pattern-stripe" patternUnits="userSpaceOnUse"
viewBox="0 0 20 20" width="10" height="10" patterntransform="rotate(45)">
<rect width="10" height="20" fill="white"/>
</pattern>
<mask id="mask-stripe">
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)"/>
</mask>
</defs>
<rect height="50" width="50" class="green-class"/>
</svg>