我想創建一個背景為純黑色的網頁，但我還需要添加一個僅在某些形狀內部可見的背景圖案（在這個簡單示例中為圓圈，但它們將是一個復雜的路徑，每個部分都不同）。
我知道我可以將圖案分配給形狀，但我還需要為形狀設定影片，并且無法為圖案設定影片。
這是我的起始代碼
我將 CSS 中的紋理應用到整個頁面，并添加了一些圓圈。現在我需要在除了形狀內部之外的任何地方“隱藏”紋理。并且頁面背景應該是黑色的。我怎樣才能做到這一點？
uj5u.com熱心網友回復：
這是你追求的那種東西嗎？
/* hide the SVG */
svg#pattern {
position: absolute;
left: -9999px;
}
body {
background-color: black;
height: 2000px;
color: white;
}
section {
height: 400px;
}
circle {
animation: throb 1s infinite;
}
@keyframes throb {
0% { r: 48px; }
50% { r: 30px; }
100% { r: 48px; }
}<svg id="pattern">
<defs>
<pattern id="check" width="10" height="10" patternUnits="userSpaceOnUse">
<rect width="10" height="10" fill="linen"/>
<rect width="5" height="5" fill="black"/>
<rect x="5" y="5" width="5" height="5" fill="black"/>
</pattern>
</defs>
</svg>
<div>
<h1>Test page</h1>
<section>
<svg width="400" height="100">
<circle cx="50" cy="50" r="48" fill="url(#check)"/>
</svg>
</section>
<section>
<svg width="400" height="100">
<circle cx="50" cy="50" r="48" fill="url(#check)"/>
</svg>
</section>
<section>
<svg width="400" height="100">
<circle cx="50" cy="50" r="48" fill="url(#check)"/>
</svg>
</section>
</div>uj5u.com熱心網友回復：
body {
background-color: black;
}
.container {
opacity: 0.8;
background-image: linear-gradient(135deg, black 25%, transparent 25%), linear-gradient(225deg, black 25%, transparent 25%), linear-gradient(45deg, black 25%, transparent 25%), linear-gradient(315deg, black 25%, #e5e5f7 25%);
background-position: 10px 0, 10px 0, 0 0, 0 0;
background-size: 10px 10px;
background-repeat: repeat;
width:200px;
height:200px;
}<div class="container" style='clip-path: url("#test");'></div>
<svg x="0" y="0" width="0" height="0">
<clipPath id="test">
<circle cx="100" cy="100" r="20" fill="red"></circle>
</clipPath>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/377361.html
上一篇：側邊欄關閉時SVG不顯示