I have
<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="pattern"
width="8" height="10"
patternUnits="userSpaceOnUse"
patternTransform="rotate(45 50 50)">
<line stroke="#ffcccb" stroke-width="7px" y2="10"/>
</pattern>
<pattern id="pattern2"
width="8" height="10"
patternUnits="userSpaceOnUse"
patternTransform="rotate(45 50 50)">
<line stroke="#ccc" stroke-width="7px" y2="10"/>
</pattern>
<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#fff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#000;stop-opacity:1" />
</linearGradient>
<linearGradient id='fadeGrad' x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset='0%' stop-color='#fff' />
<stop offset='100%' stop-color='#000' />
</linearGradient>
<style>
svg a rect, svg a path.side {
fill: url(#grad);
stroke-width:0;
opacity:.4;
}
svg a rect.corner {
fill: url(#fadeGrad);
stroke-width:0;
opacity: 1;
}
svg a:hover rect,svg a:hover path.side {
{
fill: url(#grad);
stroke-width:0;
opacity:1;
}
svg a:hover rect.corner {
fill: url(#fadeGrad);
stroke-width:0;
opacity: 1;
}
svg path.floor {
fill:url(#pattern);
stroke:#000;
stroke-width:.5;
}
</style>
</defs>
<path d="M2 20 17 15 60 15 75 20" class="floor"/>
<line x1="2" x2="75" y1="19.5" y2="19.5" style="stroke:black; stroke-width:1; stroke-linecap: round;"/>
</svg>
wWhy does it not use the pattern?