猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

如何在svg中的矩形内填充矩形？

我尝试在 svg 中执行此操作：

https://img1.mukewang.com/64feb8ad00010e0a03590234.jpg

颜色并不重要，重要的是形状。

所以我使用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>


沧海一幻觉
浏览 69回答 1
1回答

繁花不似锦

我希望，这对你有用。#outerBox {&nbsp; z-index:-1;&nbsp; fill:#f00;}<!DOCTYPE html><html><head>&nbsp; <meta charset="UTF-8">&nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; <meta http-equiv="X-UA-Compatible" content="ie=edge">&nbsp; <title>Document</title></head><body>&nbsp; <svg&nbsp; role="img"&nbsp; width="180"&nbsp; height="120"&nbsp; aria-labelledby="loading-aria"&nbsp; viewBox="0 0 180 120"&nbsp; preserveAspectRatio="none">&nbsp; <title id="loading-aria">Loading...</title>&nbsp; &nbsp; <rect&nbsp; &nbsp; x="0"&nbsp; &nbsp; y="0"&nbsp; &nbsp; width="100%"&nbsp; &nbsp; height="100%"&nbsp; &nbsp; rx="3"&nbsp;&nbsp; &nbsp; ry="3"&nbsp; &nbsp; id="outerBox"&nbsp; &nbsp; style='fill: url("#fill2");'&nbsp; ></rect>&nbsp; <rect&nbsp; &nbsp; x="0"&nbsp; &nbsp; y="0"&nbsp; &nbsp; width="100%"&nbsp; &nbsp; height="100%"&nbsp; &nbsp; clip-path="url(#clip-path)"&nbsp; &nbsp; style='fill: url("#fill");'&nbsp; ></rect>&nbsp; <defs>&nbsp; &nbsp; <clipPath id="clip-path">&nbsp; &nbsp; &nbsp; &nbsp; <rect x="10" y="89" rx="3" ry="3" width="67" height="9" />&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <rect x="10" y="100" rx="3" ry="3" width="83" height="9" />&nbsp;&nbsp; &nbsp; </clipPath>&nbsp; &nbsp; <linearGradient id="fill">&nbsp; &nbsp; &nbsp; <stop&nbsp; &nbsp; &nbsp; &nbsp; offset="0.599964"&nbsp; &nbsp; &nbsp; &nbsp; stop-color="#f3f3f3"&nbsp; &nbsp; &nbsp; &nbsp; stop-opacity="1"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <animate&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; attributeName="offset"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values="-2; -2; 1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; keyTimes="0; 0.25; 1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dur="2s"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; repeatCount="indefinite"&nbsp; &nbsp; &nbsp; &nbsp; ></animate>&nbsp; &nbsp; &nbsp; </stop>&nbsp; &nbsp; &nbsp; <stop&nbsp; &nbsp; &nbsp; &nbsp; offset="1.59996"&nbsp; &nbsp; &nbsp; &nbsp; stop-color="#ecebeb"&nbsp; &nbsp; &nbsp; &nbsp; stop-opacity="1"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <animate&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; attributeName="offset"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values="-1; -1; 2"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; keyTimes="0; 0.25; 1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dur="2s"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; repeatCount="indefinite"&nbsp; &nbsp; &nbsp; &nbsp; ></animate>&nbsp; &nbsp; &nbsp; </stop>&nbsp; &nbsp; &nbsp; <stop&nbsp; &nbsp; &nbsp; &nbsp; offset="2.59996"&nbsp; &nbsp; &nbsp; &nbsp; stop-color="#f3f3f3"&nbsp; &nbsp; &nbsp; &nbsp; stop-opacity="1"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <animate&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; attributeName="offset"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values="0; 0; 3"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; keyTimes="0; 0.25; 1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dur="2s"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; repeatCount="indefinite"&nbsp; &nbsp; &nbsp; &nbsp; ></animate>&nbsp; &nbsp; &nbsp; </stop>&nbsp; &nbsp; </linearGradient>&nbsp; &nbsp; <linearGradient id="fill2">&nbsp; &nbsp; &nbsp; <stop&nbsp; &nbsp; &nbsp; &nbsp; offset="0.599964"&nbsp; &nbsp; &nbsp; &nbsp; stop-color="#ff0000"&nbsp; &nbsp; &nbsp; &nbsp; stop-opacity="1"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <animate&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; attributeName="offset"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values="-2; -2; 1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; keyTimes="0; 0.25; 1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dur="2s"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; repeatCount="indefinite"&nbsp; &nbsp; &nbsp; &nbsp; ></animate>&nbsp; &nbsp; &nbsp; </stop>&nbsp; &nbsp; &nbsp; <stop&nbsp; &nbsp; &nbsp; &nbsp; offset="1.59996"&nbsp; &nbsp; &nbsp; &nbsp; stop-color="#ecebeb"&nbsp; &nbsp; &nbsp; &nbsp; stop-opacity="1"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <animate&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; attributeName="offset"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values="-1; -1; 2"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; keyTimes="0; 0.25; 1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dur="2s"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; repeatCount="indefinite"&nbsp; &nbsp; &nbsp; &nbsp; ></animate>&nbsp; &nbsp; &nbsp; </stop>&nbsp; &nbsp; &nbsp; <stop&nbsp; &nbsp; &nbsp; &nbsp; offset="2.59996"&nbsp; &nbsp; &nbsp; &nbsp; stop-color="#ff0000"&nbsp; &nbsp; &nbsp; &nbsp; stop-opacity="1"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <animate&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; attributeName="offset"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values="0; 0; 3"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; keyTimes="0; 0.25; 1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dur="2s"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; repeatCount="indefinite"&nbsp; &nbsp; &nbsp; &nbsp; ></animate>&nbsp; &nbsp; &nbsp; </stop>&nbsp; &nbsp; </linearGradient>&nbsp; </defs></svg></body>&nbsp;&nbsp;</html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

Html5