To jest samo pytanie i przydatny fragment kodu, który wymyśliłem.
Obecnie nie ma łatwego sposobu na osadzenie obrazu SVG, a następnie dostęp do elementów SVG przez CSS. Istnieją różne metody korzystania z frameworków JS SVG, ale są one zbyt skomplikowane, jeśli robisz tylko prostą ikonę ze stanem najazdu.
Oto co wymyśliłem, co moim zdaniem jest zdecydowanie najłatwiejszym sposobem korzystania z plików SVG na stronie internetowej. Opiera się na wczesnych metodach zamiany tekstu na obraz, ale o ile wiem, nigdy nie zrobiono tego w przypadku plików SVG.
To jest pytanie:
Odpowiedzi:
Po pierwsze, użyj tagu IMG w swoim HTML, aby osadzić grafikę SVG. Użyłem programu Adobe Illustrator do wykonania grafiki.
To tak, jakbyś osadził normalny obraz. Pamiętaj, że musisz ustawić IMG, aby miał klasę svg. Klasa „social-link” jest tylko dla przykładu. Identyfikator nie jest wymagany, ale jest użyteczny.
Następnie użyj tego kodu jQuery (w osobnym pliku lub wbudowanym w HEAD).
Powyższy kod wyszukuje wszystkie IMG z klasą „svg” i zastępuje je wbudowanym SVG z połączonego pliku. Ogromną zaletą jest to, że pozwala teraz używać CSS do zmiany koloru SVG, w następujący sposób:
Kod jQuery, który napisałem, zawiera również porty oryginalnego identyfikatora obrazów i klas. Więc ten CSS też działa:
Lub:
Przykład takiego działania można znaleźć tutaj: http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html
Mamy bardziej skomplikowaną wersję, która obejmuje buforowanie tutaj: https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90
źródło
});
$ .get za pomocą}, 'xml');
img[src$=".svg"]
i wyeliminować potrzebę posiadaniasvg
klasy.$('#ico_company path').removeAttr('fill')
. Następnie możesz zrobić#ico_company { fill: #ccc }
w swoim pliku CSSStyl
Scenariusz
źródło
width="170.667"
w moim przypadkupath
kształtów (takich jakrect
), musisz obsługiwać je również w cssMożesz teraz używać właściwości CSS
filter
w większości nowoczesnych przeglądarek (w tym Edge, ale nie IE11). Działa na obrazach SVG, a także na innych elementach. Możesz używaćhue-rotate
lubinvert
modyfikować kolory, chociaż nie pozwalają one niezależnie zmieniać różnych kolorów. Używam następującej klasy CSS, aby pokazać „wyłączoną” wersję ikony (gdzie oryginał to obraz SVG o nasyconym kolorze):Dzięki temu jest jasnoszary w większości przeglądarek. W IE (i prawdopodobnie Opera Mini, której nie testowałem) jest zauważalnie wyblakły przez właściwość opacity, która wciąż wygląda całkiem dobrze, chociaż nie jest szara.
Oto przykład z czterema różnymi klasami CSS dla ikony dzwonka Twemoji : oryginalna (żółta), powyższa „wyłączona” klasa,
hue-rotate
(zielona) iinvert
(niebieska).Pokaż fragment kodu
źródło
if ($('.w3-top img').css("color") == "rgb(0, 0, 0)") { $('.w3-top img').css("filter", "invert(100%)"); $('.w3-top img').css("-webkit-filter", "invert(100%)"); };
Alternatywnie możesz użyć CSS
mask
, przyznana obsługa przeglądarki nie jest dobra, ale możesz użyć rezerwyźródło
-webkit-mask
nie należy go używać w żadnej witrynie produkcyjnej.Jeśli możesz dołączyć pliki (PHP włącz lub włącz przez wybrany CMS) na swojej stronie, możesz dodać kod SVG i dołączyć go do swojej strony. Działa to tak samo, jak wklejanie źródła SVG na stronę, ale czyni znaczniki strony czystszymi.
Zaletą jest to, że możesz nałożyć cel na część swojego pliku SVG za pomocą CSS do aktywowania - nie wymaga javascript.
http://codepen.io/chriscoyier/pen/evcBu
Musisz tylko użyć takiej reguły CSS:
Należy pamiętać, że
!important
bit jest niezbędny do zastąpienia koloru wypełnienia.źródło
<div ng-include="'svg.svg'"></div>
#pathidorclass:hover, .wrapperclass:hover #pathidorclass { fill: green; }
Lub nawet po prostu wyeliminuj pierwotne najechanie ścieżką SVG, ponieważ i tak celujesz w nią za pomocą elementu opakowania.@Drew Baker dał świetne rozwiązanie, aby rozwiązać problem. Kod działa poprawnie. Jednak ci, którzy używają AngularJs, mogą znaleźć wiele zależności od jQuery. W związku z tym pomyślałem, że dobrym pomysłem jest wklejenie dla użytkowników AngularJS, kodu podążającego za rozwiązaniem @Drew Baker.
Sposób AngularJs tego samego kodu
1. HTML : użyj poniższego znacznika w swoim pliku HTML:
2. Dyrektywa : będzie to dyrektywa, w której musisz rozpoznać tag:
3. CSS :
4. Test jednostkowy z karma-jaśminem :
źródło
<div ng-include="/icons/my.svg" class="any-class-you-wish"></div>
ng-include
po prostu zmień tę linięvar imgURL = element.attr('src');
navar imgURL = element.attr('ng-include');
if (typeof(imgClass) !== 'undefined') { $svg.setAttribute("class", imgClass); }
zamiast split i for loop.angular.element(data)[0];
) i sprawić, aby działał z wykorzystaniem IEif ($svg.getAttribute('class')) { $svg.setAttribute('class', $svg.getAttribute('class') + ' ' + imgClass); } else { $svg.setAttribute('class', imgClass); }
. Możesz także dodaćcache: true
opcje, w$http.get
przeciwnym razie Twoja strona może stać się bardzo wolna.Zdaję sobie sprawę, że chcesz to osiągnąć za pomocą CSS, ale tylko przypomnienie w przypadku, gdy jest to mały, prosty obraz - zawsze możesz go otworzyć w Notepad ++ i zmienić wypełnienie ścieżki / whateverelement:
To może zaoszczędzić mnóstwo brzydkiego scenariusza. Przepraszam, jeśli jest poza bazą, ale czasami proste rozwiązania można przeoczyć.
... nawet zamiana wielu obrazów svg może mieć mniejszy rozmiar niż niektóre fragmenty kodu dla tego pytania.
źródło
Napisałem dyrektywę, aby rozwiązać ten problem z AngularJS. Jest dostępny tutaj - ngReusableSvg .
Zastępuje element SVG po jego renderowaniu i umieszcza go w
div
elemencie, dzięki czemu jego CSS można łatwo zmieniać. Pomaga to w użyciu tego samego pliku SVG w różnych miejscach o różnych rozmiarach / kolorach.Użycie jest proste:
Następnie możesz łatwo uzyskać:
źródło
TL / DR: GO tutaj-> https://codepen.io/sosuke/pen/Pjoqqp
Wyjaśnienie:
Zakładam, że masz HTML tak:
Zdecydowanie wybierz ścieżkę filtru, tj. Twój plik SVG jest najprawdopodobniej czarny lub biały. Możesz zastosować filtr, aby uzyskać dowolny kolor, na przykład mam czarny plik SVG, który chcę miętowo zielony. Najpierw odwracam go, aby był biały (czyli technicznie wszystkie kolory RGB są pełne), a następnie bawiłem się nasyceniem odcienia itp. Aby to zrobić poprawnie:
Jeszcze lepsze jest to, że możesz po prostu użyć narzędzia do konwersji heksa, który chcesz w filtr dla ciebie: https://codepen.io/sosuke/pen/Pjoqqp
źródło
Oto wersja
knockout.js
oparta na zaakceptowanej odpowiedzi:Ważne: W rzeczywistości wymaga również jQuery do wymiany, ale pomyślałem, że może być użyteczny dla niektórych.
Następnie po prostu zastosuj
data-bind="svgConvert: true"
do tagu img.To rozwiązanie całkowicie zastępuje
img
znacznik SVG i żadne dodatkowe powiązania nie byłyby przestrzegane.źródło
get
zażąda go ponownie. Zastanawiałem się nad zmianą atrybutu na tag, ale doszedłemsrc
do wniosku, że współczesne przeglądarki są prawdopodobnie wystarczająco inteligentne, aby mimo wszystko buforować plikdata-src
img
Oto brak kodu frameworka, tylko czysty js:
źródło
Istnieje biblioteka open source o nazwie SVGInject, która korzysta z
onload
atrybutu do wyzwalania zastrzyku. Projekt GitHub można znaleźć na stronie https://github.com/iconfu/svg-injectOto minimalny przykład użycia SVGInject:
Po załadowaniu obrazu
onload="SVGInject(this)
uruchomi się zastrzyk, a<img>
element zostanie zastąpiony zawartością pliku SVG podanego wsrc
atrybucie.Rozwiązuje kilka problemów z wtryskiem SVG:
Pliki SVG można ukryć do momentu zakończenia wstrzykiwania. Jest to ważne, jeśli styl jest już zastosowany podczas ładowania, co w przeciwnym razie spowodowałoby krótkie „niestylizowane flashowanie zawartości”.
The
<img>
elementy wstrzykują themselved automatycznie. Jeśli dodajesz pliki SVG dynamicznie, nie musisz się martwić o ponowne wywołanie funkcji wstrzykiwania.Losowy ciąg jest dodawany do każdego identyfikatora w pliku SVG, aby uniknąć wielokrotnego posiadania tego samego identyfikatora w dokumencie, jeśli plik SVG zostanie wstrzyknięty więcej niż jeden raz.
SVGInject to zwykły Javascript i działa ze wszystkimi przeglądarkami obsługującymi SVG.
Oświadczenie: Jestem współautorem SVGInject
źródło
Jeśli mamy większą liczbę takich obrazów svg, możemy również skorzystać z plików czcionek.
Strony takie jak https://glyphter.com/ mogą pobrać plik czcionek z naszych plików SVG.
Na przykład
źródło
Możesz do tego użyć obrazu danych. za pomocą obrazu danych (data-URI) możesz uzyskać dostęp do SVG jak inline.
Oto efekt najazdu przy użyciu czystego CSS i SVG.
Wiem, że to bałagan, ale możesz to zrobić w ten sposób.
Tutaj możesz przekonwertować plik SVG na adres URL danych
źródło
Ponieważ SVG jest w zasadzie kodem, potrzebujesz tylko zawartości. Użyłem PHP, aby uzyskać zawartość, ale możesz użyć, co chcesz.
Następnie wydrukowałem zawartość „tak jak jest” w pojemniku div
Aby ostatecznie ustawić regułę dla elementów potomnych SVG kontenera w CSS
Mam wyniki z ikoną materiału SVG:
źródło
Wybrane rozwiązanie jest w porządku, jeśli chcesz, aby jQuery przetwarzało wszystkie elementy svg w Twojej DOM, a Twój DOM ma rozsądny rozmiar. Ale jeśli twój DOM jest duży i zdecydujesz się na dynamiczne ładowanie jego części, naprawdę nie ma sensu ponowne skanowanie całego DOM tylko w celu aktualizacji elementów svg. Zamiast tego użyj wtyczki jQuery, aby to zrobić:
W html określ element svg w następujący sposób:
I zastosuj wtyczkę:
źródło
dla animacji zdarzeń: najechanie my możemy pozostawić style wewnątrz pliku svg, np
sprawdź to na svgshare
źródło