我尝试在 svg 中执行此操作：颜色并不重要，重要的是形状。所以我使用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 回答
繁花不似锦
TA贡献1851条经验 获得超4个赞
我希望，这对你有用。
#outerBox {
z-index:-1;
fill:#f00;
}
<!DOCTYPE html>
<html>
<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>
- 1 回答
- 0 关注
- 68 浏览
添加回答
举报
0/150
提交
取消