我嘗試在 svg 中執(zhí)行此操作：顏色并不重要，重要的是形狀。所以我使用create-content-loader中的工具，它為我提供了 svg 動畫。問題是我不能在大矩形內(nèi)做白色矩形。我無法改變顏色 - 無論我嘗試什么。我嘗試對第一和第二個矩形執(zhí)行以下操作：<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" />不行。我必須做什么才能讓它發(fā)揮作用？<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條經(jīng)驗 獲得超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 關(guān)注
- 94 瀏覽
添加回答
舉報
0/150
提交
取消