• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak posługiwać się tymi poliami svg?

VPS Starter Arubacloud
0 głosów
277 wizyt
pytanie zadane 27 sierpnia 2016 w HTML i CSS przez ShadoWs Bywalec (2,800 p.)
Znalazłem taki poradnik https://codyhouse.co/gem/responsive-sidebar-navigation/ i wszystko pięknie, ładnie tylko nie mogę zbytnio ogarnąć tych ikon chciałbym je zamienić ale niestety za bardzo nie wiem jak nie miałem nigdy styczności z rozszerzeniem svg. Mam coś takiego http://wildfire1.hekko24.pl/test/#0 i tam przy dodaj rangę chciałbym zamienić ikonkę na plusik. Z góry dziękuję za pomoc :)

2 odpowiedzi

+2 głosów
odpowiedź 27 sierpnia 2016 przez IBB Gaduła (3,020 p.)
wybrane 27 sierpnia 2016 przez ShadoWs
 
Najlepsza

Możesz po prostu edytować plik "cd-nav-icons.svg". Otwórz ten plik w edytorze kodu, którego używasz, i ręcznie (kodem) dodaj do niego nową ikonkę - znak 'plus' nie jest trudno w ten sposób "narysować". Możesz np. zamienić zawartość tego pliku na następujący kod:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="112px" height="16px" viewBox="0 0 112 16"><g  transform="translate(0, 0)"><path fill="#0055ff" d="M15,16H1c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1v14C16,15.6,15.6,16,15,16z M2,14h12V2H2V14
	z"/>
<path data-color="color-2" fill="#0055ff" d="M6,4c0.6,0,1,0.4,1,1S6.6,6,6,6S5,5.6,5,5S5.4,4,6,4z"/>
<polygon data-color="color-2" fill="#0055ff" points="3,12 5,8 7,10 10,6 13,12 "/></g><g  transform="translate(16, 0)"><path fill="#0055ff" d="M8,2c1.1,0,2,0.9,2,2v1c0,1.1-0.9,2-2,2S6,6.1,6,5V4C6,2.9,6.9,2,8,2 M8,0C5.8,0,4,1.8,4,4v1
	c0,2.2,1.8,4,4,4s4-1.8,4-4V4C12,1.8,10.2,0,8,0L8,0z"/>
<path data-color="color-2" fill="#0055ff" d="M9,12c1.5,0,2.8,0.8,3.5,2l-8.9,0c0.7-1.2,2-2,3.5-2H9 M9,10H7c-3.3,0-6,2.7-6,6v0h14v0
	C15,12.7,12.3,10,9,10L9,10z"/></g><g  transform="translate(32, 0)"><path fill="#0055ff" d="M12,0H1v16h11c1.7,0,3-1.3,3-3V3C15,1.3,13.7,0,12,0z M13,13c0,0.6-0.4,1-1,1H3V2h9c0.6,0,1,0.4,1,1V13z"/>
<polygon data-color="color-2" fill="#0055ff" points="5,9 7,7 9,9 9,3 5,3 "/></g><g  transform="translate(48, 0)">
<path fill="#0055ff" d="M8,0C3.6,0,0,3.1,0,7c0,3.9,3.6,7,8,7c0.2,0,0.4,0,0.6,0l5.4,2v-4.4c1.2-1.2,2-2.8,2-4.6C16,3.1,12.4,0,8,0z
	 M12,10.8v2.3L8.9,12c0,0-0.7,0-0.9,0c-3.3,0-6-2.2-6-5s2.7-5,6-5s6,2.2,6,5C14,9.2,12,10.8,12,10.8z"/>
</g><g  transform="translate(64, 0)">
<path fill="#0055ff" d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0z M13.9,9H8.7L6.9,4.6L5.1,5.4L6.5,9H2.1
	C2,8.7,2,8.3,2,8c0-3.3,2.7-6,6-6s6,2.7,6,6C14,8.3,14,8.7,13.9,9z"/>
</g><g  transform="translate(80, 0)">
<path data-color="color-2" fill="#0055ff" d="M10,14H6c0,1.1,0.9,2,2,2S10,15.1,10,14z"/>
<path fill="#0055ff" d="M15,11h-0.5C13.8,10.3,13,9.3,13,8V5c0-2.8-2.2-5-5-5S3,2.2,3,5v3c0,1.3-0.8,2.3-1.5,3H1c-0.6,0-1,0.4-1,1
	s0.4,1,1,1h14c0.6,0,1-0.4,1-1S15.6,11,15,11z"/></g><g  transform="translate(96, 0)">
  <circle cx="8" cy="8" r="8" fill="#0055ff" /><path data-color="color-2" fill="#ffffff" d="M13,7h-4v-4h-2v4h-4v2h4v4h2v-4h4z"/>
</g></svg>

Następnie w CSS zmień właściwość "background-position" na odpowiednim elemencie z "background-position: -64px 0" na "background-position: -96px 0". Powinno zadziałać.

komentarz 27 sierpnia 2016 przez ShadoWs Bywalec (2,800 p.)
O dzięki wielkie a jeszcze pytanko z jakiej strony brałeś ikonkę?
komentarz 27 sierpnia 2016 przez obl Maniak (51,280 p.)
A dlaczego ręcznie, nie lepiej otworzyć plik w Inkscap-ie i tam jak normalny człowiek narysować co potrzebne?
komentarz 27 sierpnia 2016 przez IBB Gaduła (3,020 p.)

Jeśli już to "brałaś"...

Z żadnej. Tak jak napisałam, "narysowałam" ją poprzez napisanie kilku linijek kodu.

Poniższy kod rysuje niebieskie kółko:

<circle cx="8" cy="8" r="8" fill="#0055ff" />

A ten białego plusa:

<path data-color="color-2" fill="#ffffff" d="M13,7h-4v-4h-2v4h-4v2h4v4h2v-4h4z"/>

Możesz więcej poczytać o tworzeniu elementów SVG na tej stronie: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial

komentarz 27 sierpnia 2016 przez IBB Gaduła (3,020 p.)

A dlaczego ręcznie, nie lepiej otworzyć plik w Inkscap-ie i tam jak normalny człowiek narysować co potrzebne?

Podałam przyklad, w jaki sposób można to zrobić bez użycia programu graficznego. Nie napisałam, że jest to jedyna słuszna metoda - każdy robi, jak mu wygodniej.  

+1 głos
odpowiedź 27 sierpnia 2016 przez kubaapk Nałogowiec (44,270 p.)
Jak chcesz zmienić ikonkę na plusik to musisz sobie ten plusik jakoś zrobić. Bo widzę, że te ikony są jako sprite w .svg, jest w nich plus?
komentarz 27 sierpnia 2016 przez ShadoWs Bywalec (2,800 p.)
edycja 27 sierpnia 2016 przez ShadoWs

W style.css wygląda to tak http://pastebin.com/xYV4ra3Q jest odnośnik do  background: url(img/cd-nav-icons.svg) no-repeat 0 0; A w tym pliku coś takiego http://pastebin.com/qbtV8YmL. A tak to wyświetla w pliku index 

<li class="has-children overview">
					<a href="#0">Dodaj Rangę</a>
				</li>

Nie mam pojęcia jak tu dodać plusik jakoś bierze po tych nazwach np 

overview 
ale w pliku svg nie ma takiej nazwy. Normalnie czarna magia dla mnie :) 

Np coś takiego chciałbym dodać svg http://www.flaticon.com/free-icon/add_189755#term=plus&page=1&position=43 jak to uczynić żeby to działało ładnie przy dodaj rangę 

 

komentarz 27 sierpnia 2016 przez kubaapk Nałogowiec (44,270 p.)
No i zobacz na te linijki.

background-position: -64px 0;

Te Twoje ikonki są w jednym pliku svg,

W taki sposób.

-----ikona1-----ikona2------ikona3----.....

I za pomocą background-position: wybierasz poszczególne ikony.

Najprościej będzie jak pobierzesz sobie ikonkę plusika i dodasz ją do .overview. Przez background-image czy czym tam Ci będzie wygodniej.
komentarz 27 sierpnia 2016 przez ShadoWs Bywalec (2,800 p.)
A masz może jakiś pomysł żeby zamienić to na coś innego np http://fontawesome.io/ żeby dużo w kodzie nie zmieniać?
komentarz 27 sierpnia 2016 przez kubaapk Nałogowiec (44,270 p.)

Hm, jak chcesz dodać coś z fontawesome, to usuń z <li class="has-children overview"> 'overview' i dodaj ikonę obok Dodaj Rangę, <i class="fa fa-xxx" aria-hidden="true"></i> czy co tam chcesz.

Podobne pytania

0 głosów
0 odpowiedzi 265 wizyt
pytanie zadane 1 grudnia 2018 w HTML i CSS przez PiotrG25 Nowicjusz (120 p.)
0 głosów
3 odpowiedzi 309 wizyt
pytanie zadane 22 stycznia 2017 w HTML i CSS przez Nicolaus Dyskutant (9,740 p.)
+1 głos
1 odpowiedź 1,558 wizyt
pytanie zadane 16 listopada 2021 w HTML i CSS przez TheDarkSide Użytkownik (930 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...