svg -> zaokrąglanie path o nieregularnym kształcie (kształt klawisza Enter)

0

Dzień dobry.

Mam taki kształt (ścieżkę path): m1003.4 220.18v69.2h-34.56v69.21h140.36v-69.21-69.2h-106.8z
Można go wklepać tu, żeby go zobaczyć: https://yqnn.github.io/svg-path-editor/

Jak zaokrąglić rogi tego wielokąta? :D

Dzięki
M.

Tak on wygląda, jakby komuś nie chciało się kopiować i wklejać:
screenshot-20211104185745.png

1

Ja zrobiłem coś takiego za pomocą quadratic bezier curve, ale pod kątem wymiarów lekko różni się od twojego, bo robiłem go od początku.

Przechwytywanie.JPG

Jeśli chodziło o coś podobnego to trzymaj:
M 5 1 Q 5 0 6 0 Q 9 0 9 0 Q 10 0 9 0 Q 10 0 10 1 Q 10 0 10 7 Q 10 8 9 8 Q 5 8 1 8 q -1 0 -1 -1 Q 0 5 1 5 Q 3 5 5 5 Q 4 5 5 5 Q 4.5 5 4 5 Q 5 5 5 4

1

Można takie coś napisać z palca:

coś w stylu

<svg width="200" height="200" viewBox="0 0 100 100">
  <path d="
  M 85 10
  A 5 5 0 0 1 90 15
  L 90 85
  A 5 5 0 0 1 85 90
  L 35 90
  A 5 5 0 0 1 30 85
  L 30 50
  A 5 5 0 0 1 35 45
  L 50 45
  A 5 5 0 0 0 55 40
  L 55 15
  A 5 5 0 0 1 60 10
  Z
  "/>
</svg>

https://jsfiddle.net/759po308/

Jak to działa?

  • Mamy układ współrzędnych 100 x 100
  • Zaczynamy rysowanie w punkcie [85, 10] (to jest to M) prawy górny róg, przed rozpoczęciem łuku
  • Rysujemy łuk (litera A) o promieniu 5 (rx = 5, ry = 5, dwie pierwsze cyfry), który zaczyna się w punkcie gdzie skończyła się poprzednia linia [85, 10], a kończy się w [90, 15], te 0 0 1 są trochę mniej istotne, określają kierunek łuku (mniej więcej)
  • Prowadzimy linię (litera L) z punktu gdzie kończył się łuk [90, 15] do [90, 85]
  • Dalej znowu łuk
  • Potem znowu linia i tak dalej
  • Na koniec zamykamy ścieżkę (litera Z)

Nie jest to jakieś skomplikowane, można pobawić się tymi liczbami, pozmieniać je, żeby ogarnąć jak to działa.

A tutaj do poczytania
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

Albo prościej, narysować to w jakimś programie (Adobe Illustrator, Inkscape, Figma itp). Z tym, że pisząc to z ręki generuje się trochę mniej syfu. Z drugiej strony, jakiś bardziej skomplikowanych kształtów tak prosto się nie napisze. No ale taki "enter" można.

1 użytkowników online, w tym zalogowanych: 0, gości: 1