CODEWITHSUNDEEP
htmlcsssvg
Jon Sud
Jon Sud

Reputation: 11641

How to fill rect inside rect in svg?

I try to do this in svg:

enter image description here

The colors doesn't matters, only the shape.

So I use tool from create-content-loader which provide me svg with animation.

The problem is I can't do the white rect inside the big rect. I unable to change the color - whatever I try.

I try to do to first and second rect: 

<rect style="fill:#fff" x="0" y="89" rx="3" ry="3" width="67" height="7" />
 or
 <rect fill="#fff" x="0" y="89" rx="3" ry="3" width="67" height="7" />

not works. what I have to do to make it work?

<svg
  role="img"
  width="170"
  height="110"
  aria-labelledby="loading-aria"
  viewBox="0 0 165 110"
  preserveAspectRatio="none"
>
  <title id="loading-aria">Loading...</title>
  <rect
    x="0"
    y="0"
    width="100%"
    height="100%"
    clip-path="url(#clip-path)"
    style='fill: url("#fill");'
  ></rect>
  <defs>
    <clipPath id="clip-path">
        <rect x="0" y="89" rx="3" ry="3" width="67" height="9" /> 
        <rect x="0" y="100" rx="3" ry="3" width="83" height="9" /> 
        <rect x="0" y="2" rx="3" ry="3" width="151" height="83" />
    </clipPath>
    <linearGradient id="fill">
      <stop
        offset="0.599964"
        stop-color="#f3f3f3"
        stop-opacity="1"
      >
        <animate
          attributeName="offset"
          values="-2; -2; 1"
          keyTimes="0; 0.25; 1"
          dur="2s"
          repeatCount="indefinite"
        ></animate>
      </stop>
      <stop
        offset="1.59996"
        stop-color="#ecebeb"
        stop-opacity="1"
      >
        <animate
          attributeName="offset"
          values="-1; -1; 2"
          keyTimes="0; 0.25; 1"
          dur="2s"
          repeatCount="indefinite"
        ></animate>
      </stop>
      <stop
        offset="2.59996"
        stop-color="#f3f3f3"
        stop-opacity="1"
      >
        <animate
          attributeName="offset"
          values="0; 0; 3"
          keyTimes="0; 0.25; 1"
          dur="2s"
          repeatCount="indefinite"
        ></animate>
      </stop>
    </linearGradient>
  </defs>
</svg>

Upvotes: 0

Views: 1335

Answers (1)

Kumar Gaurav
Kumar Gaurav

Reputation: 738

I hope, This will work for you.

#outerBox {
  z-index:-1;
  fill:#f00;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <svg
  role="img"
  width="180"
  height="120"
  aria-labelledby="loading-aria"
  viewBox="0 0 180 120"
  preserveAspectRatio="none"
>
  <title id="loading-aria">Loading...</title>
    <rect
    x="0"
    y="0"
    width="100%"
    height="100%"
    rx="3" 
    ry="3"
    id="outerBox"
    style='fill: url("#fill2");'
  ></rect>
  <rect
    x="0"
    y="0"
    width="100%"
    height="100%"
    clip-path="url(#clip-path)"
    style='fill: url("#fill");'
  ></rect>
  <defs>
    <clipPath id="clip-path">
        <rect x="10" y="89" rx="3" ry="3" width="67" height="9" /> 
        <rect x="10" y="100" rx="3" ry="3" width="83" height="9" /> 
    </clipPath>
    <linearGradient id="fill">
      <stop
        offset="0.599964"
        stop-color="#f3f3f3"
        stop-opacity="1"
      >
        <animate
          attributeName="offset"
          values="-2; -2; 1"
          keyTimes="0; 0.25; 1"
          dur="2s"
          repeatCount="indefinite"
        ></animate>
      </stop>
      <stop
        offset="1.59996"
        stop-color="#ecebeb"
        stop-opacity="1"
      >
        <animate
          attributeName="offset"
          values="-1; -1; 2"
          keyTimes="0; 0.25; 1"
          dur="2s"
          repeatCount="indefinite"
        ></animate>
      </stop>
      <stop
        offset="2.59996"
        stop-color="#f3f3f3"
        stop-opacity="1"
      >
        <animate
          attributeName="offset"
          values="0; 0; 3"
          keyTimes="0; 0.25; 1"
          dur="2s"
          repeatCount="indefinite"
        ></animate>
      </stop>
    </linearGradient>
    <linearGradient id="fill2">
      <stop
        offset="0.599964"
        stop-color="#ff0000"
        stop-opacity="1"
      >
        <animate
          attributeName="offset"
          values="-2; -2; 1"
          keyTimes="0; 0.25; 1"
          dur="2s"
          repeatCount="indefinite"
        ></animate>
      </stop>
      <stop
        offset="1.59996"
        stop-color="#ecebeb"
        stop-opacity="1"
      >
        <animate
          attributeName="offset"
          values="-1; -1; 2"
          keyTimes="0; 0.25; 1"
          dur="2s"
          repeatCount="indefinite"
        ></animate>
      </stop>
      <stop
        offset="2.59996"
        stop-color="#ff0000"
        stop-opacity="1"
      >
        <animate
          attributeName="offset"
          values="0; 0; 3"
          keyTimes="0; 0.25; 1"
          dur="2s"
          repeatCount="indefinite"
        ></animate>
      </stop>
    </linearGradient>
  </defs>
</svg>
</body>
  
</html>

Upvotes: 1

Related Questions