我画了一个书签(见代码)
书签中心部分的遮罩必须拉伸/收缩到父元素的大小(这取决于元素内部文本的大小)
由于某种原因它不起作用,尽管看起来它足以使用clipPathUnits="objectBoundingBox"
。
告诉我问题是什么以及如何解决它
.cover-title {
display : flex;
flex-direction : row;
margin : 0px;
padding : 0px;
font-size : 0px;
}
.cover-title-left {
width : 26px;
height : 91px;
margin : 0px;
padding : 0px;
clip-path : url(#left);
background-color : red;
}
.cover-title-middle {
display : flex;
align-items : center;
/*width : 233px;*/
height : 91px;
margin : 0px;
padding : 0px;
color : white;
font-size : 38px;
font-weight : 400;
white-space : nowrap;
background-color : green;
clip-path : url(#middle);
}
.cover-title-right {
width : 36px;
height : 91px;
margin : 0px;
padding : 0px;
background-color : blue;
clip-path : url(#right);
}
.cover-subtitle {
height : 50px;
border-top-right-radius : 10px;
background-color : orange;
}
<div class="cover">
<div class='cover-title'>
<div class='cover-title-left'></div>
<div class='cover-title-middle'>WELCOME HOME</div>
<div class='cover-title-right'></div>
</div>
<div class='cover-subtitle'></div>
</div>
<svg width="0" height="0" viewBox="0 0 25 91" xmlns="http://www.w3.org/2000/svg">
<clipPath id='left'>
<path d="M25 0.00724123H15.4637C7.00179 -0.251624 1.30391e-05 6.46316 1.17475e-05 14.8371L0 91H25V0.00724123Z" />
</clipPath>
</svg>
<svg width="0" height="0" viewBox="0 0 233 91" xmlns="http://www.w3.org/2000/svg">
<clipPath id='middle' clipPathUnits="objectBoundingBox">
<path d="M0 0L233 7V91H0V0Z" />
</clipPath>
</svg>
<svg width="0" height="0" viewBox="0 0 36 91" xmlns="http://www.w3.org/2000/svg">
<clipPath id='right'>
<path d="M0 91H35C28.6455 89.2663 23.9747 83.4607 23.9747 76.5657V22.2468C23.9747 14.1636 17.545 7.54183 9.45371 7.29195L0 7V91Z" />
</clipPath>
</svg>