मेरे पास प्रगति दिखाने के लिए एक बिंदीदार रेखा वाला एक svg पथ है। मैं जो चाहता हूं वह यह है कि मैं एक मुखौटा बना सकता हूं जो x बिंदुओं की मात्रा भरता है और बाकी को हल्का रंग देता है .. यह प्रगति दिखाएगा।

मेरे पास वर्तमान में जो मुद्दा है वह यह है कि डॉट्स ठीक से नहीं भरे जा रहे हैं और मुझे इसे पूरी तरह से काम करने के लिए इसे ट्विक करना मुश्किल हो रहा है। मैंने नीचे कोड जोड़ा है।

यह इस तरह दिखना चाहिए:

enter image description here

जैसा कि आप देख सकते हैं कि रास्ता भरा जा रहा है।

यहाँ मेरा कोड अब तक है:

body {
    background:#171B42;
}

.locked {
  text-align: center;
  margin: 76px auto;
  width: 230px;
  position: relative;
  margin-top: 180px;
}

.locked img {
  width: 60px;
  margin: 0 26px;
}

.locked.row-1 svg {
    width: 163px;
    height: 175px;
    position: absolute;
    top: -130px;
    right: -50px;
    z-index: -1;
}
    <div class="locked row-1">
      
        <svg viewBox="0 0 163 175">
  <defs>
    <mask id="mask">
      <rect fill="black" x="0" y="0" width="515" height="515"></rect>
      <path stroke-dashoffset="0" stroke-dasharray="0 20" fill="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>
    
  </div>

मास्क को ठीक से कैसे लगाया जाए इस पर कोई विचार? धन्यवाद

1
Simon 10 सितंबर 2020, 22:41

1 उत्तर

सबसे बढ़िया उत्तर

मैंने वह परिणाम प्राप्त किया जो आपको नीचे दी गई टिप्पणी की गई पंक्ति को बदलकर आवश्यक था:

<!-- <path stroke-dashoffset="0" stroke-dasharray="0 20" fill="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> -->
<path stroke="white" stroke-width="5" 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>

तथ्य यह है कि आपने stroke="white" के बजाय fill="white" का उपयोग किया, नकाबपोश मंडलियों को पथ द्वारा खींचे गए आकार में विवश कर दिया, जबकि आपकी अन्य रेखाएं <path id="path" fill="none"> भाग में परिभाषित रूपरेखा पथ का उपयोग कर रही थीं। .

1
ArnaudV 10 सितंबर 2020, 23:37