[look997]

#svg #css #webdev #frontend
Chcę żeby strzałka miała kolor taki jak linia:
https://codepen.io/look997/pen/LYGeKMP
Jak to zrobić?

Problem że jest wiele takich SVG na stronie na raz, a marker-end odnosi się do id marker-a.

[MarekAntoniusz]

@look997

[look997]

@MarekAntoniusz: Nie, to ma dynamicznie się zmieniać razem ze zmianą koloru linii.

[look997]

@MarekAntoniusz: Może lepszy przykład: trzy strzałki, jedna z nich ma zmienić kolor - i jej linia i grot taki sam kolor ma mieć:
https://codepen.io/look997/pen/LYGeKMP

Dubluje się id ale jakby dać grot-path strzałkę na zewnątrz to i tak problem.

Dla mojego efektu miał być chyba context-fill ale nie wiem jak tego użyć.

[look997]

@look997: Rozwiązałem generując osobne id dla każdego markera, ale w ogóle mi się to rozwiązanie nie podoba (chociaż działa).

Nadal wolałbym normalną metodę.

[look997]

@grlux: te context-fill to nie zmienna CSS tylko specjalna właściwość SVG.
A jak chcę żeby tylko jedna strzałka była cała na zielono a reszta strzałem na czerwono?

[look997]

@grlux: Ale ja.... chcę żeby jedna ze strzałek była cała w innym kolorze.
Dwie strzałki zielone, a jedna czerwona.

A to z --context-fill w ogóle tak nie działa.

Mogę usunąć każde --context-fill i --context-stroke i ten twój przykład działa nadal tak samo.

Mylisz to chyba ze zmiennymi CSS, które zaczynają się od podwójnego myślnika ale je trzeba odczytywać za pomocą var().

Za to istnieje context-fill i context-stroke (bez myślników), które jakoś

[look997]

@grlux: Nie używam tylko próbowałem użyć. Nie wiem jak to działa tylko widziałem odpowiedź z tą właściwością na stacku.

Ale ty podajesz że to ma dwie kreski, czy dwie kreski to miało być coś jak związane z eksperymentami -moz-x? Przecież normalnie dwie kreski oznaczają zmienne CSS.

Przykład z jakiegoś Editor's draft, który właśnie znalazłem - ale on nie działa:

path {
 fill: none;
 stroke-width: 4px;
 marker: url(#diamond);
 }

[look997]

@grlux: A jak się znasz to pytanie:
Czy można w marker-end zamiast id użyć jakoś grot bezpośrednio? Jest data url ale to by trzeba zakodować przy każdej zmianie, więc niewygodne.
Jakiś inny sposób?

[look997]

@grlux: No to zostawiam moje rozwiązanie z wygenerowanym JS-em osobnym ID dla każdego markera. W ogóle mi się to nie podoba ale przynajmniej działa.

[look997]

Zauważ, że użycie załatwia ci całą logikę związaną z obrotem elementu itd.

@grlux: Nie no, chciałem żeby w atrybucie marker-end wpisać wartość w stylu data:image/svg+xml;utf8, ... . Tylko trzeba by zakodować, gównie cudzysłowie, a to by było niewygodne.

[look997]

@grlux Co się porobiło?
Dlaczego pousuwałeś wszystko?

[grlux]

@look997: temat się wyjaśnił, usunąłem codepen więc linki były nieaktualne, to chyba nie problem? jeśli to sorry...

[look997]

@grlux: Coś wartościowego na pewno napisałeś.
No ale trudno.