Declare gradient in CSS and link it to RECT

[abdelkader_l_]

I declared in CSS this:

rect#LnGradient1 {
      background: red; /* For browsers that do not support gradients */
     /* Safari 5.1 to 6.0 */
    background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
    /* Opera 11.1 to 12.0 */
    background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
    /* Firefox 3.6 to 15 */
    background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
    /* Standard syntax */
   background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

and in index.html I declared this in head:

 <link rel="stylesheet" type="text/css" href="css/gradient.css">

and this:

  <g>
    <rect x="5" y="3" width="1490" height="160" fill="url(#LnGradient1)" stroke-width="3"
          stroke="rgb(255,0,0)"  />
  </g>

can someone tell me why it does not fill the rectangle with color. Thanks.

[abdelkader_l_]

I am developing new game using HTML5, CSS and JAVASCRIPT in blank project with CORDOVA plugins.

[Chris_P_Intel]

Your CSS declaration (rect#LnGradient) says that the gradient should be applied to a rect with the id of LnGradient.  But your rect doesn't have an id.

You can remove the "#LnGradient" part of your declaration.

Or you can add id="LnGradient" to the rect.