Как заполнить прямоугольник внутри прямоугольника в SVG? - PullRequest
Новая
       0

Как заполнить прямоугольник внутри прямоугольника в SVG?

0 голосов
/ 14 марта 2020

Я пытаюсь сделать это в svg:

enter image description here

Цвет не имеет значения, только форма.

Так Я использую инструмент из create-content-loader , который предоставляет мне svg с анимацией.

Проблема в том, что я не могу сделать белый прямоугольник внутри большого прямоугольника. Я не могу изменить цвет - все, что я пытаюсь.

Я пытаюсь сделать первый и второй прямоугольник: 

<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" />

не работает. что я должен сделать, чтобы это работало? 

<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>

1 Ответ

1 голос
/ 14 марта 2020

Надеюсь, это сработает для вас. 

#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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...