Gradient na pierścieniu (oponie)

[Maxbert]

Witam,
czy koś wie jak ustawić gradient "osiowy" np. na pierścieniu (oponie)? Chodzi o to aby obszar w pobliżu średnicy zewnętrznej i wewnętrznej miał taką samą barwę a pomiędzy żeby była inna, przejściowa
PZDR
MG

[Jermor]

Czy chodzi ci o coś takiego?

[Maxbert]

Tak o chodzi ale oczywiście z płynnym przejściem z żółtego poprzez zielony z powrotem na żółty. Na pierścieniu nie umiem tego zrobić ale na prostokącie wyglądałoby to tak:

gradient.png (4.24 KiB) Przejrzano 1639 razy

[Jermor]

Według mojej wiedzy nie da sie tego zrobić. Gradient pozwala ustalić zmianę kolorów tylko między kolorem początkowym i końcowym. Typ osiowy przyjmuje, że kolor początkowy znajduje sie na osi i zmienia się lustrzanie w miarę oddalania się od niej. Oś musi byc jednak linią prostą.

[cwolan]

LibreOffice od wersji 7.6 umożliwia wielokolorowe gradienty (MCGR). W pewnym stopniu pozwala to osiągnąć efekt "gradientu na oponie".
⠀

gradTyre.png (47.79 KiB) Przejrzano 1627 razy

[Jan_J]

Jak zrobić to jedno, ale można też spytać jak zapisać.
SVG to jeden z podstawowych formatów zapisu płaskich (2D) rysunków wektorowych.
Open/LibreOffice Draw w dużym stopniu akceptuje dane SVG.
Jest też niezły edytor specjalnie zaprojektowany dla SVG, nazywa się Inkscape.

Tu: https://www.w3schools.com/graphics/svg_grad_radial.asp znajduje się przewodnik dotyczący gradientów radialnych w SVG. Jest w nim napisane jak coś zapisać, nie jest napisane jako to wyklikać, bo przewodnik dotyczy języka, a nie oprogramowania. Tym niemniej każdy z przykładowych rysunków odwiera się w Draw poprawnie.

W przewodniku w3schools pokazano m.in. zasadę tworzenia wielokrotnych przejść między kolorami w jednym gradiencie. Załączam przykład Radial Gradient 2 z w3schools: kod oraz plik spakowany do zip-a.

Kod: Zaznacz cały

 <svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="red" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>