Mam te ikony i chciałbym proceduralnie dodać cień kropla (zasadniczo, coś, cokolwiek ) do nich na unosi się, więc nie wyglądają tak hokey.

Są to SVG, więc w teorii mogę przedespendować coś takiego:

<filter id="f1" x="0" y="0" width="200%" height="200%">
  <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
  <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
  <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>

I jakaś magia JavaScript, aby zastosować go na myszy. Może to ewentualnie oszczędzać w wieku pracy.

Problem polega na tym, że SVG są prezentowane jako <a style='background-image:url(icon.svg)' />.

Czy istnieje sposób na wejście do elementu SVG?

0
Steven Lu 18 wrzesień 2012, 00:24

4 odpowiedzi

Najlepsza odpowiedź

Jeśli używasz SVG jako obrazu, nie możesz dostać się do domu i manipulować go za pośrednictwem JavaScript.

Podczas gdy można go załadować za pomocą XMLHTTPREQUEST, a następnie włóż je do głównego dokumentu jako danych Inline za pomocą obiektu Domparsera, to naraża się na problemy z bezpieczeństwem, że przeglądarki próbują chronić Cię przez blokowanie dostępu obrazu, tj obrazu może się zmienić Możesz załadować dowolną obsługę JavaScript do swojej strony.

To, co wydawało mi się najprostsze i najbezpieczniejsze, jest po prostu zmienić pliki obrazów bezpośrednio za pomocą edytora i dodać do nich filtr, użyj zmodyfikowanych obrazów.

0
Robert Longson 17 wrzesień 2012, 21:32

Nie, nie jest to bezpośrednio możliwe. Obejście, jeśli potrzebujesz, byłoby użycie Inline SVG w HTML lub odniesienie do plików SVG za pomocą ,