stroke-dasharray และ stroke-dashoffset เพื่อเติมเต็มความคืบหน้า
Sep 15 2020
ฉันมี 2 svg ที่ฉันพยายามสร้างแถบความคืบหน้า เส้นทางแรกเป็นเส้นทางโค้งอย่างไรก็ตามฉันสามารถทำให้มันใช้งานได้โดยใช้stroke-dasharray="400 400"และstroke-dashoffset="-110"(ซึ่งใช้กับ a maskเพื่อเติมเต็มความคืบหน้ามันทำงานได้ดีมาก
ปัญหาที่ฉันมีคือเส้นตรงฉันต้องการสร้างแถบความคืบหน้าที่คล้ายกันซึ่งจะเติมเต็มความคืบหน้า แต่มันไม่ได้ผลและฉันพยายามหาสาเหตุที่อาจจะ 3 ชั่วโมงแล้ว ... stroke-dasharrayและstroke-dashoffsetฉันไม่สามารถรับหน้ากากเพื่อเติมในจุด .. ผมไม่ทราบว่าสิ่งที่ฉันทำผิด
นี่คือข้อมูลอ้างอิงสำหรับเอฟเฟกต์ที่ฉันพยายามบรรลุ
ฉันแนบรหัสของฉัน:
body {
background: #171B42;
}
.locked {
text-align: center;
margin: 44px auto;
width: 230px;
position: relative;
margin-top: 180px;
display:inline-block;
}
.locked img {
width: 60px;
margin: 0 26px;
}
.locked.row-1 svg {
width: 163px;
height: 175px;
position: absolute;
top: -130px;
right: -50px;
z-index: -1;
}
.locked.row-2 svg {
width: 77px;
height: 30px;
position: absolute;
top: -54px;
right: 74px;
z-index: -1;
}<!-- CURVED PROGRESS -->
<div class="locked row-1">
<svg viewBox="0 0 163 175">
<defs>
<mask id="mask">
<path stroke-dasharray="400 400" stroke-width="10" stroke-dashoffset="-110" stroke="white" d="M0 16.7246C54 16.7246 145.7 11.6246 146.5 85.2246C147.3 158.825 51 158.225 0 158.225"></path>
</mask>
<path id="path" fill="none" d="M0 16.7246C54 16.7246 145.7 11.6246 146.5 85.2246C147.3 158.825 51 158.225 0 158.225"></path>
</defs>
<!-- solid wide line -->
<use href="#path" stroke="rgba(255,255,255,0.05)" stroke-width="30"></use>
<!-- solid narrow line -->
<use href="#path" stroke="rgba(255,255,255,0.12)" stroke-width="15"></use>
<!-- dotted full line -->
<use href="#path" stroke="rgba(255,255,255,0.2)" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round"></use>
<!-- dotted masked line -->
<use href="#path" stroke="rgba(255,255,255,0.8)" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round" mask="url(#mask)"></use>
</svg>
<img src="https://i.imgur.com/h3ElY2f_d.webp?maxwidth=728&fidelity=grand">
</div>
<!-- LINE PROGRESS -->
<div class="locked row-2">
<svg viewBox="0 0 77 17">
<defs>
<mask id="mask-2">
<path stroke-dasharray="400 400" stroke-width="10" stroke-dashoffset="10" stroke="white" d="M76.6841 8.40967H0.551514"></path>
</mask>
<path id="path-2" fill="none" d="M76.6841 8.40967H0.551514"></path>
</defs>
<!-- solid wide line -->
<use href="#path-2" stroke="rgba(255,255,255,0.05)" stroke-width="30"></use>
<!-- solid narrow line -->
<use href="#path-2" stroke="rgba(255,255,255,0.12)" stroke-width="15"></use>
<!-- dotted full line -->
<use href="#path-2" stroke="rgba(255,255,255,0.2)" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round"></use>
<!-- dotted masked line -->
<use href="#path-2" stroke="rgba(255,255,255,0.8)" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round" mask="url(#mask-2)"></use>
</svg>
<img src="https://i.imgur.com/h3ElY2f_d.webp?maxwidth=728&fidelity=grand">
</div>ความคิดใด ๆ ? ขอขอบคุณ!
คำตอบ
GirkovArpa Sep 15 2020 at 09:55
ในครั้งที่สองอินสแตนซ์สุดท้ายของการstroke="rgba(255,255,255,0.2)"เปลี่ยนความทึบจากไป0.20.8
body {
background: #171B42;
}
.locked {
text-align: center;
margin: 44px auto;
width: 230px;
position: relative;
margin-top: 180px;
display:inline-block;
}
.locked img {
width: 60px;
margin: 0 26px;
}
.locked.row-1 svg {
width: 163px;
height: 175px;
position: absolute;
top: -130px;
right: -50px;
z-index: -1;
}
.locked.row-2 svg {
width: 77px;
height: 30px;
position: absolute;
top: -54px;
right: 74px;
z-index: -1;
}<!-- CURVED PROGRESS -->
<div class="locked row-1">
<svg viewBox="0 0 163 175">
<defs>
<mask id="mask">
<path stroke-dasharray="400 400" stroke-width="10" stroke-dashoffset="-110" stroke="white" d="M0 16.7246C54 16.7246 145.7 11.6246 146.5 85.2246C147.3 158.825 51 158.225 0 158.225"></path>
</mask>
<path id="path" fill="none" d="M0 16.7246C54 16.7246 145.7 11.6246 146.5 85.2246C147.3 158.825 51 158.225 0 158.225"></path>
</defs>
<!-- solid wide line -->
<use href="#path" stroke="rgba(255,255,255,0.05)" stroke-width="30"></use>
<!-- solid narrow line -->
<use href="#path" stroke="rgba(255,255,255,0.12)" stroke-width="15"></use>
<!-- dotted full line -->
<use href="#path" stroke="rgba(255,255,255,0.2)" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round"></use>
<!-- dotted masked line -->
<use href="#path" stroke="rgba(255,255,255,0.8)" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round" mask="url(#mask)"></use>
</svg>
<img src="https://i.imgur.com/h3ElY2f_d.webp?maxwidth=728&fidelity=grand">
</div>
<!-- LINE PROGRESS -->
<div class="locked row-2">
<svg viewBox="0 0 77 17">
<defs>
<mask id="mask-2">
<path stroke-dasharray="400 400" stroke-width="10" stroke-dashoffset="10" stroke="white" d="M76.6841 8.40967H0.551514"></path>
</mask>
<path id="path-2" fill="none" d="M76.6841 8.40967H0.551514"></path>
</defs>
<!-- solid wide line -->
<use href="#path-2" stroke="rgba(255,255,255,0.05)" stroke-width="30"></use>
<!-- solid narrow line -->
<use href="#path-2" stroke="rgba(255,255,255,0.12)" stroke-width="15"></use>
<!-- dotted full line -->
<use href="#path-2" stroke="rgba(255,255,255,0.8)" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round"></use>
<!-- dotted masked line -->
<use href="#path-2" stroke="rgba(255,255,255,0.8)" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round" mask="url(#mask-2)"></use>
</svg>
<img src="https://i.imgur.com/h3ElY2f_d.webp?maxwidth=728&fidelity=grand">
</div>Simon Sep 15 2020 at 21:02
ฉันก็เลยหาปัญหา ฉันพบวิธีแก้ปัญหาจากคำถาม stackoverflow อื่น ..
คุณจึงไม่สามารถปิดบังรูปร่างเช่นเส้นแนวนอนหรือแนวตั้ง (กล่องขอบเขตความสูงเป็นศูนย์ / ความกว้างศูนย์) โดยใช้พารามิเตอร์มาสก์เริ่มต้น เพียงเพิ่ม "maskUnits =" userSpaceOnUse "ในองค์ประกอบมาสก์ของคุณเพื่อแก้ไข
สำหรับข้อมูลเพิ่มเติม: SVG: มาสก์ไม่ทำงานตามที่คาดไว้
ดังนั้นฉันจึงลงเอยด้วยการที่จะเพิ่มmaskUnits="userSpaceOnUse"ของฉันmask
body {
background: #171B42;
}
.locked {
text-align: center;
margin: 44px auto;
width: 230px;
position: relative;
margin-top: 180px;
display:inline-block;
}
.locked img {
width: 60px;
margin: 0 26px;
}
.locked.row-1 svg {
width: 163px;
height: 175px;
position: absolute;
top: -130px;
right: -50px;
z-index: -1;
}
.locked.row-2 svg {
width: 77px;
height: 30px;
position: absolute;
top: -54px;
right: 74px;
z-index: -1;
}<!-- CURVED PROGRESS -->
<div class="locked row-1">
<svg viewBox="0 0 163 175">
<defs>
<mask id="mask" maskUnits="userSpaceOnUse">
<path stroke-dasharray="400 400" stroke-width="10" stroke-dashoffset="-110" stroke="white" d="M0 16.7246C54 16.7246 145.7 11.6246 146.5 85.2246C147.3 158.825 51 158.225 0 158.225"></path>
</mask>
<path id="path" fill="none" d="M0 16.7246C54 16.7246 145.7 11.6246 146.5 85.2246C147.3 158.825 51 158.225 0 158.225"></path>
</defs>
<!-- solid wide line -->
<use href="#path" stroke="rgba(255,255,255,0.05)" stroke-width="30"></use>
<!-- solid narrow line -->
<use href="#path" stroke="rgba(255,255,255,0.12)" stroke-width="15"></use>
<!-- dotted full line -->
<use href="#path" stroke="rgba(255,255,255,0.2)" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round"></use>
<!-- dotted masked line -->
<use href="#path" stroke="rgba(255,255,255,0.8)" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round" mask="url(#mask)"></use>
</svg>
<img src="https://i.imgur.com/h3ElY2f_d.webp?maxwidth=728&fidelity=grand">
</div>
<!-- LINE PROGRESS -->
<div class="locked row-2">
<svg viewBox="0 0 77 17">
<defs>
<mask id="mask-2">
<path stroke-dasharray="400 400" stroke-width="10" stroke-dashoffset="10" stroke="white" d="M76.6841 8.40967H0.551514"></path>
</mask>
<path id="path-2" fill="none" d="M76.6841 8.40967H0.551514"></path>
</defs>
<!-- solid wide line -->
<use href="#path-2" stroke="rgba(255,255,255,0.05)" stroke-width="30"></use>
<!-- solid narrow line -->
<use href="#path-2" stroke="rgba(255,255,255,0.12)" stroke-width="15"></use>
<!-- dotted full line -->
<use href="#path-2" stroke="rgba(255,255,255,0.2)" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round"></use>
<!-- dotted masked line -->
<use href="#path-2" stroke="rgba(255,255,255,0.8)" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round" mask="url(#mask-2)"></use>
</svg>
<img src="https://i.imgur.com/h3ElY2f_d.webp?maxwidth=728&fidelity=grand">
</div>