Nadawanie stylu wybranym obrazom w SVG

http://jsfiddle.net/wujq51hy/100/

Cześć, mam następujący problem - mając jeden pattern z jednym zdjęciem, chciałbym by dla jednego z dwóch elementów <path> obrazek referencowany przez fill: url(#image); został wyszarzony.

Innymi słowy - w podanym wyżej przykładzie w jsfiddle chciałbym, żeby połowa zdjęcia na dole była wyszarzona, a połowa u góry została taka jaka jest. Problemem jest to, że nie mam pojęcia jak zmienić atrybut obrazku referencowanego przez fill: url(#image); Macie jakiś pomysł jak to zrobić, jest to możliwe bez użycia js?

Czyli chcesz, taki efekt, jaki już tam istnieje, tylko dzielący obrazek nie po przekątnej, a na górną i dolną połowę?
No to musisz zmienić współrzędne punktów ścieżce path.

@Freja Draco:

Nope, chce by dolny obrazek był czarno-biały a górny taki jak jest. Chodzi o to, by dolny obrazek miał styl filter: grayscale(100%); a górny nie. Wszystko w jednym znaczniku svg, bo jeśli dam styl na cały svg to obydwa obrazki będą czarno-białe, a ja chce by był tylko jeden czarno biały.

<svg id='triangle' xmlns="http://www.w3.org/2000/svg" version="1.1" width='300px' height='300px style='`filter: grayscale(100%);'> <!-- tutaj nie chce dodawać linijki bo spowoduje modyfikacje dwóch obrazków --> 
    <path d='M0 0 L300 0 L300 300 Z' class='myClass'></path>
    <path d='M0 300 L0 0 L300 300 Z' style="filter: grayscale(100%);" class='myClass'></path> <!-- chciałbym by ta linijka kodu działała tak jak opisałem-->
</svg>

Wiem że mogę przygotować dwie wersje jednego obrazka (czarno-biały i zwykły) i zrobić dwa patterny, ale nie o to dokładnie mi chodzi. Gdybym miał 100 różnych wariantów jednego obrazka to nie będę przygotowywał dla każdego osobnego jpga i tworzył inny pattern.

Chodzi o uzyskanie takiego efektu bez ręcznego tworzenia zdjęcia i bez nowego znacznika svg:

Nie jestem specjalistką od SVG, ale jeżeli tamtejszy CSS działa tak samo jak w HTML-u, to filtr przypisany do elementu wypływa tylko na ten element, a nie na to, co przez niego prześwieca. Więc musisz mieć dwa obiekty z takim samym tłem i różnymi filtrami.

@Freja Draco:

Nie rozumiem, mogłabyś podać jakiś pseudokod? :(

Szczerze powiedziawszy nie rozumiem też czemu to nie działa gdy styl dodam do jednego ze znaczników path, czemu on nie jest "propagowany" do zdjęcia do którego się odnosi. Jak styl dodam do znacznika svg to styl jest poprawnie przekazywany do zdjęć niżej w hierarchii i obydwa zdjęcia są czarno-białe.

Chodzi o uzyskanie takiego efektu bez ręcznego tworzenia zdjęcia i bez nowego znacznika svg

<svg id='triangle' xmlns="http://www.w3.org/2000/svg" version="1.1" width='300px' height='300px'>
  <defs>
    <pattern id='image' width="1" height="1" viewBox="0 0 100 100" >
      <image xlink:href='https://www.w3schools.com/howto/pineapple.jpg'  width="100" height="100" preserveAspectRatio="none"></image>
    </pattern>
  </defs>
    <path d='M0 0 L300 0 L300 300 Z' class='myClass'></path>
    <path d='M0 300 L0 0 L300 300 Z' class='myClass' style="filter: grayscale(100%);"></path>
</svg>

Definiujesz wzorzec image.
Przypisujesz go jako tło fill dla dwóch elementów: ścieżek rysujących trójkąt.
Drugiej z nich przypisujesz dodatkowo filtr szarości.

nie rozumiem też czemu to nie działa gdy styl dodam do jednego ze znaczników path,

No przecież tak właśnie robisz i tak działa.

czemu on nie jest "propagowany" do zdjęcia do którego się odnosi.
Jak styl dodam do znacznika svg to styl jest poprawnie przekazywany do zdjęć niżej w hierarchii i obydwa zdjęcia są czarno-białe.

Bo tak działa CSS. Jeśli chcesz zmodyfikować zdjęcie wykorzystywane jako tło, dodajesz filtr do IMAGE,
jeśli chcesz modyfikować tylko wybrany element używający tego zdjęcia jako tła, dodajesz filtr do PATH (czy jakiegoś innego elementu).

Freja Draco napisał(a):

No przecież tak właśnie robisz i tak działa.

Właśnie w tym sęk że nie działa, można podejrzeć na jsfiddle który podesłałem, zdjęcie ze stylem nie jest szare.

Ponadto zmodyfikowanie patternu na

      <image xlink:href='https://www.w3schools.com/howto/pineapple.jpg' style="filter: grayscale(100%);" width="100" height="100" preserveAspectRatio="none"></image>

też nie powoduje że dwa obrazki są szare. Dlaczego?

<img src='https://www.w3schools.com/howto/pineapple.jpg' style="filter: grayscale(100%);"  width="100" height="100">

w kodzie powyżej obrazek już jest szary.

Nie wiem, jak ty to tam robisz, ale u mnie działa:
http://jsfiddle.net/1vbf5ouk/

@Freja Draco:

Okej, już wiem o co chodzi - na Firefoxie działa, na Chromie nie. Stąd pewnie te nieporozumienie między nami.

Zayebiście :D.

To w takim razie pytanie - jak zrobić by na Chromie to działało?

EDIT 1: próbowałem w scss, nie działa

@mixin grayscale($value) {
    filter: #{ "grayscale(" + $value + ")" };
}

.gray {
  @include grayscale(100%);
}

EDIT 2: próbowałem tak, też nie działa

-webkit-filter: unquote("grayscale(100%)"); 

CountZero napisał(a):

@Freja Draco:

Okej, już wiem o co chodzi - na Firefoxie działa, na Chromie nie.

Najbardziej kombosowa wersja, jaka przychodzi mi do głowy:

  -ms-filter:grayscale(100%);
  -webkit-filter:grayscale(100%);
  -moz-box-filter:grayscale(100%);
  -o-filter:grayscale(100%);
  filter:grayscale(100%);

Ale jeśli chodzi o Chroma, to powinno wystarczyć samo:

  -webkit-filter:grayscale(100%);

@Freja Draco: Nope, niestety żadna wersja nie działa na Chromie. Nie wiem z czego to wynika.

Ha! Ciekawy problem. Okazuje się, że filter: grayscale działa w Chrome normalnie wewnątrz dokumentów HTML, natomiast w SVG trzeba użyć osobnych filtrów SVG-owych, a co zabawne w przypadku Firefoksa trzeba użyć klasycznych filtrów CSS-owych bo te SVG-owe tam nie działają.

A już myślałam, że epokę użerania się z niekompatybilnością przeglądarek mamy dawno za sobą.

Niemniej takie rozwiązanie udało mi się wymyślić:
http://jsfiddle.net/z8c2reqt/

@Freja Draco:

Super, działa! Jak doszłaś do tego że są takie różnice w działaniu SVG, jest to napisane gdzieś w dokumentacji?

CountZero napisał(a):

@Freja Draco:

Jak doszłaś do tego że są takie różnice w działaniu SVG?

Użyłam Google'a.