SVG cant see pattern

[lurtnowski]

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?

[DaveMaxwell]

You have an extra { at svg a:hover rect,svg a:hover path.side

But you also need to escape the elements as CDATA (I think - all the examples I’ve seen have those. You also don’t need to get so specific, so like the stripe can be used as .floor

    <style type="text/css" >
      <![CDATA[
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;	
}

.floor {
      fill:url(#pattern);
      stroke:#000;
      stroke-width:.5;
}
      ]]>
    </style>