Kreska-kreska - CSS-Tricks

Anonim

stroke-dasharrayNieruchomość w CSS jest do tworzenia kresek w skoku kształtów SVG. Im wyższa liczba, tym więcej odstępów między kreskami w obrysie.

.module ( stroke-dasharray: 5; )

Zapamiętaj:

  • Spowoduje to zastąpienie atrybutu prezentacji
  • Nie spowoduje to zastąpienia stylu wbudowanego, np

Wartości

stroke-dasharrayNieruchomość może przyjąć dowolną długość, łącznie z wartościami niemianowana:

  • stroke-dasharray: 2
  • stroke-dasharray: 2.5
  • stroke-dasharray: 2em
  • stroke-dasharray: 15%

Wartości bez jednostek są prawdopodobnie najczęstszym wyborem, tak jak zwykle ma to miejsce w przypadku wartości SVG. Stają się jednostkami długości, które są odniesione do układu współrzędnych ustawionego przez viewBox.

Zobacz właściwość Pen stroke-dasharray autorstwa CSS-Tricks (@ css-tricks) w CodePen.

Podstępne z stroke-dasharray

Czy widziałeś kiedyś te fajne dema, w których kształt SVG wydaje się sam rysować? To sztuczka, która pobiera stroke-dasharrayelement i animuje go w połączeniu z stroke-dashoffsetwłaściwością.

.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )

Zobacz Podstawowy przykład rysowania linii SVG, wstecz i do przodu autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.

Bardziej szczegółowo omawiamy tę technikę w tym poście. Wygląda na to, że IE 11 i nowsze nie lubią animować właściwości obrysu za pomocą @keyframes, więc bądź ostrożny.

Związane z

  • stroke
  • stroke-dashoffset
  • stroke-linecap
  • stroke-width

Więcej informacji

  • SVG 1.1 Spec
  • MDN na wypełnieniach i obrysach

Wsparcie przeglądarki

Chrom Safari Firefox Opera TO ZNACZY Android iOS
tak tak tak tak 9+ 4.4+ tak