Oletetaan, että sinulla on rivi SVG:ssä:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>Voit käyttää stroke-dasharray ominaisuus CSS:ssä väliviivojen tekemiseen:
line {
stroke-dasharray: 5;
}Että 5 arvo on suhteellinen yksikkö, joka perustuu SVG:iden kokoon viewBox. Voisimme käyttää mitä tahansa CSS-pituutta. Mutta se tekee katkoviivakuvion, joka on 5 yksikköä pitkä ja niiden välissä on 5 yksikköä.
Toistaiseksi hyvin. Voimme käyttää kahta arvoa, joissa toinen arvo asettaa erikseen raon pituuden:
Nyt meillä on viivoja, jotka ovat 5 yksikköä ja aukkoja, jotka ovat 10. Kokeillaan kolmatta arvoa:
Näetkö kuinka muodostamme mallin täällä? Se menee:
- Viiva: 5 yksikköä
- Väli: 10 yksikköä
- Viiva: 15 yksikköä
Luulisi sen toistuvan sen jälkeen täsmälleen samassa tahdissa. Mutta ei! Jos näin tapahtuisi, törmäisimme toisiimme:
- Viiva: 5 yksikköä
- Väli: 10 yksikköä
- Viiva: 15 yksikköä
- Viiva: 5 yksikköä
- Väli: 10 yksikköä
- Viiva: 15 yksikköä
- …ja niin edelleen.
Sen sijaan, stroke-dasharray saa kaiken älykkääksi ja kopioi kuvion, jos arvoja on pariton määrä.
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;Siksi yksittäinen arvo toimii! Aiemmin julistimme sinkku 5 arvo. Se on todella sama kuin sanoa stroke-dasharray: 5 5. Ilman toista arvoa stroke-dasharray kopioi implisiittisesti ensimmäisen arvon saadakseen toistettavan kuvion. Muuten se olisi vain kiinteä viivaviiva, joka on 5 yksikköä pitkä, mutta niiden välillä ei ole aukkoja!
Kuvio riippuu myös itse muodon koosta. Meidän SVG line on 500 yksikköä. Laitetaan isommaksi stroke-dasharray arvot ja laske ne yhteen:
stroke-dasharray: 10 20 30 40 50; /* 150 units */Jos kuvio suoritetaan neljä kertaa (150 yksikköä ⨉ 4 iteraatiota), käsittelemme yhteensä 600 yksikköä. Nämä 100 lisäyksikköä leikataan pois, jotta kuvio ei vuotaisi itsestään yli.
Siinä kaikki.
🎩 Hattuvinkki Joshua Dance varten kutsumalla tätä esiin!
