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

Kolorowanie ikonki pliku .svg

VPS Starter Arubacloud
0 głosów
967 wizyt
pytanie zadane 20 czerwca 2015 w HTML i CSS przez artimal Gaduła (4,800 p.)

Witam, do mojego paska menu brakowało mi jednej ikonki którą stowrzyłem podczas dzisiejszego romansu z grafiką wektorową. Ma ona trochę inną składnię niż gotowce których używałem i niestety nie działa dodanie do niej:

fill="#ffffff"

i cały czas pozostaje czarna.

Jak żyć? Proszę o pomoc, oto kod:
 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="25px" height="25px"  version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 847 847"
 xmlns:xlink="http://www.w3.org/1999/xlink" fill="#ffffff">
 <defs>
  <style type="text/css">
   <![CDATA[
    .fil0 {fill:#020201}
    .fil1 {fill:#141413}
   ]]>
  </style>
 </defs>
<symbol fill="#ffffff" id="illuminati" viewBox="-4001 -3417 8848 7680">
 <path class="fil0" d="M-1512 1740c-5,-47 1274,-2286 3092,-914 163,123 747,708 766,886 18,175 -1416,2270 -3087,916 -160,-130 -754,-699 -771,-888zm-2489 2514l0 -28 4436 -7643 4412 7680 -8848 -9z"/>
 <path class="fil0" d="M251 2127c-57,0 -43,14 -43,-41 -486,-380 -19,-947 424,-728 337,167 312,874 -381,769zm-75 -1316c-1329,404 -640,2189 491,1865 1254,-360 718,-2233 -491,-1865z"/>
 <path class="fil1" d="M251 2127c0,-56 13,-41 -43,-41 0,55 -14,41 43,41z"/>
</symbol>
 <g id="Warstwa_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <g id="_664591424">
   <g>
    <path class="fil0" d="M250 538c0,-4 118,-211 285,-84 15,11 69,65 71,81 2,17 -131,210 -285,85 -14,-12 -69,-65 -71,-82zm-229 232l0 -3 409 -705 407 709 -816 -1z"/>
    <path class="fil0" d="M413 574c-5,0 -4,1 -4,-4 -45,-35 -2,-87 39,-67 31,15 29,80 -35,71zm-7 -122c-123,38 -59,202 45,172 116,-33 66,-206 -45,-172z"/>
    <path class="fil1" d="M413 574c0,-5 1,-4 -4,-4 0,5 -1,4 4,4z"/>
   </g>
  </g>
 </g>
</svg>

Pozdrawiam

1 odpowiedź

0 głosów
odpowiedź 20 czerwca 2015 przez Comandeer Guru (599,730 p.)
wybrane 21 czerwca 2015 przez artimal
 
Najlepsza
path[class*=fil] {fill: #f00;}

Styluj ścieżki, nie symbol

komentarz 21 czerwca 2015 przez artimal Gaduła (4,800 p.)

Do symbolu dodałem z desperacji :) Poprzednio, w gotowcach zadziałało dodanie w <svg...
 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="25px" height="25px" fill="#ffffff" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
	<path d="M76.982,50c0-0.847-0.474-1.575-1.167-1.957L26.541,19.595c-0.363-0.253-0.803-0.404-1.279-0.404
		c-1.239,0-2.244,1.004-2.244,2.243c0,0.087,0.016,0.169,0.026,0.253h-0.026v57.131h0.026c0.127,1.119,1.066,1.99,2.218,1.99
		c0.409,0,0.787-0.117,1.117-0.308l0.02,0.035L75.875,51.97l-0.02-0.035C76.526,51.547,76.982,50.83,76.982,50z"/>
</g>
</svg>

A teraz nie działa...
Nie rozumiem też twojego kodu. Po dodaniu fill="#ffffff" lub fill: #f00; do ścieżek, ikonka dalej jest czarna.

komentarz 21 czerwca 2015 przez Comandeer Guru (599,730 p.)
Dodałem ten kod do css i ikonka stała się czerwona
komentarz 21 czerwca 2015 przez artimal Gaduła (4,800 p.)

Teraz to już wymiękam :D Miała być biała, u mnie jest czarna, u ciebie czerwona. Tylko rozumiem zapisałeś to jako plik svg który potem dodałeś do html za pomocą:
 

<embed src="ikonki/illuminati.svg" type="image/svg+xml"/>

?

komentarz 21 czerwca 2015 przez artimal Gaduła (4,800 p.)
Zrobiłem nowy obrazek wektorowy tym razem już biały, zmienilem tylko wielkosc i szerokosc na px i działa.
komentarz 21 czerwca 2015 przez Comandeer Guru (599,730 p.)

embed? Przecież teraz się wkłada SVG od razu do HTML, względnie do img ;)

komentarz 21 czerwca 2015 przez artimal Gaduła (4,800 p.)
Jak od razu do html? Chcę mieć czytelny kod a nie dodatkowe sto lini.
komentarz 21 czerwca 2015 przez Comandeer Guru (599,730 p.)

Przecież widać wyraźnie gdzie się zaczyna i kończy SVG w HTML. Poza tym - wynikowy kod nie ma być czytelny. Czytelność powinna być zachowana tylko w czasie developingu, a na produkcji najlepiej, żeby kod był zminifikowany, jak choćby na mojej domowej.

No i wiele rzeczy z SVG można zrobić tylko wówczas, gdy będzie w HTML (jak choćby właśnie zabawa z fill)

komentarz 21 czerwca 2015 przez artimal Gaduła (4,800 p.)
Dzięki za rady ;)

Podobne pytania

+1 głos
1 odpowiedź 73 wizyt
+3 głosów
2 odpowiedzi 671 wizyt
pytanie zadane 14 września 2016 w Nasze projekty przez obl Maniak (51,280 p.)
+1 głos
4 odpowiedzi 923 wizyt
pytanie zadane 7 września 2015 w HTML i CSS przez Wiciorny Ekspert (269,120 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!

...