小提琴:https://jsfiddle.net/4taucsx3/6/
我希望裂缝能够在黑暗的边界之后,但无论我怎么做,我似乎都无法做到这一点。我不希望溢出的svg点显示出来。我怎样才能做到这一点?
这是我对此的尝试:
<div class="outer">
<div class="inner">
<div class="compass-display">
<svg class="pr-arrow">
<polygon points="200,30 235,210 200,240 165,210" />
</svg>
<svg class="sec-arrow">
<polygon points="200,370 235,210 200,240 165,210" />
</svg>
<svg class="arrows-shadow">
<polygon points="205,370 245,210 205,35 180,210" />
</svg>
<svg class="arrows-overlay">
<polygon points="200,370 200,210 200,35 165,210" />
</svg>
</div>
<div class="compass-cracks">
<svg>
<polygon points="120,400 0,320 0,190 60,225 60,180 90,170 110,200 120,170 160,180 170,130 220,130 250,80 280,100 350,40 430,180 380,180 390,200 370,220 330,200 350,240 310,210 290,310 260,270 210,320 200,280 180,320 160,300 120,400" />
</svg>
</div>
</div>
<div class="arrows-dot"></div>
</div>
.outer {
position: relative;
width: 600px;
height: 600px;
border-radius: 50%;
background-color: #cfe7f7;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
border: 50px solid black;
border-radius: 50%;
box-sizing: border-box;
z-index: 1001;
}
.compass-display {
position: relative;
width: 400px;
height: 400px;
border-radius: 50%;
background-color: #fcfffe;
box-sizing: border-box;
> svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: inherit;
height: inherit;
z-index: 1000;
&:nth-of-type(3) {
z-index: 999;
}
}
}
.compass-cracks {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
> svg {
width: inherit;
height: inherit;
fill: #cfe7f7;
}
}
.arrows-dot {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
border-radius: 50%;
background-color: white;
z-index: 1002;
}
.pr-arrow {
fill: #d14b4b;
}
.sec-arrow {
fill: #1671ad;
}
.arrows-shadow {
fill: grey;
}
.arrows-overlay {
fill: rgba(0, 0, 0, 0.2);
}
答案 0 :(得分:2)
我建议您在.inner类中添加“overflow:hidden;”,如下所示:
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
border: 50px solid black;
border-radius: 50%;
box-sizing: border-box;
z-index: 1001;
overflow: hidden;
}
答案 1 :(得分:1)
您可以将css class compass-cracks更改为以下代码:
.compass-cracks {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
> svg {
width: inherit;
height: inherit;
fill: #cfe7f7;
}
}