Jak tworzyć symbole SVG, które mają modyfikowalny kolor wypełnienia, kolor obrysu i szerokość obrysu?

Chcę utworzyć kilka symboli SVG dla QGIS przy użyciu Inkscape, te symbole muszą mieć atrybuty opisane w pytaniu. Przez ostatnie dwa dni eksperymentowałem zgodnie z instrukcją Sourcepola i naśladowałem niektóre symbole dołączone do qgis, które mają pożądane atrybuty bez powodzenia.

W końcu eksperymentowałem z najprostszą formą symbolu: stworzyłem svg, który zawiera tylko okrąg w Inkscape i próbowałem go zmodyfikować.

Oryginalny plik ( circle.svg ) ma następującą linię:

<path
   sodipodi:type="arc"
   style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.01988637;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"

Zmodyfikowałem to w:

<path
   sodipodi:type="arc"
   style="fill:param(fill) #ffffff;fill-opacity:1;stroke:param(outline) #000000;stroke-width:param(stroke-width) 1.01988637;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"

Zapisano jako circle_modified.svg i wybrał go jako symbol punktu, ale Qgis nie mógł zmienić wszystkich trzech parametrów jednocześnie.

Co zrobiłem źle lub powinienem zrobić inaczej?

Mój system: Qgis 1.8.0 na 64-bitowym Ubuntu 12.04, Inkscape 0.48, edytor tekstu Gedit 3.4.1.

Aby utworzyć symbole SVG modyfikowalnymi koloru wypełnienia , koloru obrysu i szerokości skoku w QGIS należy zastąpić styl atrybut z toru elementu z tych 3 atrybutów:

• fill = "param (fill) #FFF"
• stroke = "param (kontur) # 000"
• stroke-width = "param (szerokość-konturu) 1"

Jeśli używasz InkScape, po zapisaniu nowego pliku SVG dokonaj edycji pliku i zastąp całą linię rozpoczynającą się stylem:

style="fill:#00a000;fill-opacity:1;stroke:#000000;stroke-width:1;(...)"

z następującym wierszem:

fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1"

Chciałem to zrobić, odkąd wczoraj dowiedziałem się, jak dodać symbole SVG , ale wszystkie były czarne. Odpowiedź udzielona przez jgrocha działa - chciałem zagłosować, ale po dołączeniu do forum GIS muszę najpierw zyskać reputację!

Znalazłem również tę stronę, która potwierdza odpowiedź: SYMBOLE SVG W QGIS Z MODYFIKOWANYMI KOLORAMI

Aby mieć możliwość zmiany kolorów znacznika, musimy dodać symbole zastępcze „param (wypełnienie)” dla koloru wypełnienia, „param (kontur)” dla koloru konturu i „param (szerokość konturu)” dla szerokości obrysu. Po tych symbolach zastępczych może opcjonalnie następować wartość domyślna:

<svg width="100%" height="100%">
  <rect fill="param(fill) #ff0000" stroke="param(outline) #00ff00" stroke-width="param(stroke-width) 10" width="100" height="100">
  </rect>
</svg>`

Dzięki!

Wydaje się, że warto udzielić prostej odpowiedzi na temat podstawowych plików SVG, aby przejść obok podanych tutaj szczegółów na temat szczegółów dotyczących oprogramowania ...

Plik SVG to tylko plik tekstowy. Zakończeniem pliku będzie .svg, ale można go otworzyć w edytorze tekstu takim samym jak plik z zakończeniem .txt

Prosty plik svg wygląda mniej więcej tak:

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- This is a comment -->

<g id="group1">
<title>My group</title>
<rect id="rectangle1" height="29" width="27" y="50" x="57" stroke-width="1.5" stroke="#000" fill="#ff0"/>
<ellipse ry="17" rx="16" id="circle1" cy="64" cx="113.5" stroke-width="1.5" stroke="#999" fill="#aaa"/>
<path id="path1" d="m56.5,97l51.5,1l5,25l-29,-5l-27.5,-21z" stroke-width="1.5" stroke="#f00" fill="#fff"/>
</g>
</svg>

Widać przy tym, że kolory są zdefiniowane przez parametry (gdzie kropki są zastępowane znakami od 0 do 9 lub AF):

stroke=#...
fill=#...

I szerokość obrysu jest zdefiniowana przez

stroke-width="..."

Za pomocą edytora tekstu można dodać następujące elementy, aby zastąpić dowolne zdefiniowane wartości w SVG ... umożliwiając ustawienie wartości przez QGIS. QGIS rozumie wartość „param (fill)” - i inne wartości „param (...)” - ponieważ są one ustawiane przez sam QGIS.

Kolor wypełnienia: fill="param(fill) #FFF"

Kolor konturu / linii: stroke="param(outline) #000"

Kontur / szerokość linii: stroke-width="param(outline-width) 1"

Wypełnienie krycia: fill-opacity="param(fill-opacity)"

Krycie konturu / linii: stroke-opacity="param(outline-opacity)"

Pamiętaj, że nic nie stoi na przeszkodzie, abyś używał wartości „param (...)” w nieco dziwnych miejscach - na przykład możesz użyć wartości „param (wypełnienie-krycie)” do zdefiniowania koloru wypełnienia w jednym bicie Plik SVG, ale kolor obrysu / linii w innym kawałku SVG.

W oknie dialogowym kompozytora QGIS lub symbolu stylu ustawienia kolorów SVG są dość oczywiste. Krycie wypełnienia i obrysu / linii jest ustawiane jako część ustawień kolorów. Ustawienie obrysu / szerokości linii jest oczywiste.

Wreszcie dwa punkty

Po pierwsze, zauważ, że w SVG prawidłowe jest zdefiniowanie kolorów jako zbioru takich atrybutów:

style="fill:none;fill-opacity:1;stroke:#000000;"

Wygląda na to, że nie działa poprawnie, jeśli dołączasz parametry opisane tutaj.

Po drugie, podczas korzystania z oprogramowania takiego jak Illustrator lub Inkscape, to oprogramowanie może dodawać wiele dodatkowych atrybutów do tekstu SVG. Jeśli wiesz, co robisz i rozumiesz podstawy SVG, jak wyżej, może uprościć życie, jeśli pozbędziesz się tego dodatkowego tekstu. W szczególności może się okazać, że kolory są ustawiane poprzez definicję stylów, a nie pozycja po pozycji.

Miałem również ten sam problem, ale po kilku próbach w końcu zadziałało. Piszę tutaj procedurę z nadzieją, że okaże się pomocna. Stworzyłem prostą spiralę w inkscape i zapisałem ją jako svg. Następnie otworzyłem go w edytorze tekstu (np. Notepad ++), a wpis „styl” pojawił się dwukrotnie w moim kodzie svg. Najpierw w tej części:

<linearGradient
   id="linearGradient6172"
   osb:paint="solid">
  <stop
     style="stop-color:#000000;stop-opacity:1;"
     offset="0"
     id="stop6174" />
</linearGradient>

A potem tutaj:

<path
   sodipodi:type="spiral"
   style="fill:none;fill-rule:nonzero;opacity:1;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:35;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round"
   id="path4686" />

Aby kod działał w celu uzyskania edytowalnej spirali svg w qgis, całkowicie usunąłem pierwszy wpis „style” z pierwszego fragmentu kodu:

<linearGradient
   id="linearGradient6172"
   osb:paint="solid">
</linearGradient>

I wstaw drugi „styl” w drugim fragmencie kodu w następujący sposób:

<path
   sodipodi:type="spiral"
   fill="param(fill) #000" stroke="param(outline) #FFF" stroke-  width="param(outline-width) 1"
   id="path4686" />

„# 000” i „#FFF” to dwa domyślne kolory wypełnienia i konturu, natomiast „1” to domyślna szerokość konturu, jeśli nie określono inaczej. Po zapisaniu tych zmian możesz zapisać plik SVG we właściwej ścieżce, określonej przez QGis (w zależności od wersji można go znaleźć w Ustawieniach -> Opcje -> Ścieżki SVG). Wreszcie twój nowy obiekt svg pojawi się wśród innych domyślnych obiektów i będzie można go edytować.

Mam nadzieję, że to może pomóc

Mam zamiar rozwinąć tę kwestię, ponieważ zajęło mi to trochę czasu, aby ją uruchomić. Zrób swój symbol i zapisz go jako Inkscape SVG i otwórz w edytorze tekstu. W dolnym bloku kodu zobaczysz; style = "fill: # 00a000; wypełnienie-krycie: 1; obrys: # 000000; szerokość obrysu: 1; (...)" Zamień ten wiersz na; fill = "param (fill) #FFF" stroke = "param (kontur) # 000" stroke-width = "param (kontur-szerokość) 1" W moich plikach SVG linia stylu pojawia się dla każdego elementu lub kształtu w pliku svg i zastąpienie tych linii nie działało dla mnie; ale robienie tego na dole na Inkscape SVG działało. Wypróbowałem moje rozwiązanie i wskazówki tutaj na temat zoptymalizowanych i zwykłych formatów SVG, ale to nie zadziałało, mam nadzieję, że to pomoże. Inkscape 0.48, QGIS 2.12.0, NotePad ++

Wydaje się, że to problem, jeśli użyjemy dokładnej wartości. Za każdym razem, gdy otwieramy opcje, indywidualna wartość koloru lub obrysu jest resetowana do wartości w SVG. Można to naprawić, ustawiając wartość w opcjach zaawansowanych. Moje testy pokazały mi, że lepiej byłoby używać fill="param(fill)"zamiast fill="param(fill) #FFF"i tak dalej w SVG.

Kolejne interesujące obejście: jeśli masz plik SVG z kolorem pierwszego planu i tła, możesz użyć koloru obrysu jako koloru tła wypełnienia. Zauważ, że nie możesz użyć osobnego koloru konturu dla całego SVG.

Dzięki Wam wszystkim. Jest tu kilka świetnych wskazówek, które wskazały mi właściwy kierunek, ale żadne nie odnosiło się do mojego konkretnego problemu, więc dodam to, co odkryłem do puli. Ponieważ wydaje się, że nie ma jednej właściwej odpowiedzi dla każdego przypadku, chciałbym najpierw zaproponować sugestię jak najszybszego przetestowania wyników.

Szybkie testy edycji

• Tymczasowo przenieś wszystkie swoje ikony SVG z folderu SVG QGIS.
• Utwórz kopię pliku svg, nad którym chcesz pracować tylko do odczytu, aby go nie zastąpić i umieść jego edytowalną wersję w folderze svg QGIS.
• Otwórz QGIS, załaduj warstwę punktową do pracy, otwórz właściwości warstwy i wybierz „marker SVG”.
• Możesz dodatkowo kliknąć plik svg prawym przyciskiem myszy i tymczasowo ustawić domyślny program „Otwórz za pomocą” na Notatnik, aby po prostu kliknąć go dwukrotnie, aby edytować w Notatniku.

Dzięki tej konfiguracji możesz natychmiast zobaczyć, jak QGIS reaguje na twoje zmiany. Pozostaw plik svg otwarty w Notatniku, a panel właściwości otwórz w QGIS. Aby przetestować wyniki edycji, wystarczy nacisnąć Ctrl + S, aby zapisać ją w Notatniku i przełączyć na QGIS. Aby ponownie załadować plik SVG, zmień typ warstwy symbolu na dowolny inny, a następnie zmień go z powrotem na marker SVG. Jest tam tylko jeden, więc nie masz problemu ze znalezieniem go. Bardzo szybko przetestowałem dziesiątki edycji. Jeśli masz problemy z przywróceniem pliku svg do formy źródłowej po edycji, możesz go po prostu usunąć i wykonać kolejną kopię.

Edytowanie ikony SVG

Problem, który miałem, polegał na tym, że konkretna ikona, nad którą pracowałem, nie zawierała nigdzie słów „styl” ani „wypełnienie”, więc miałem problem z ustaleniem, gdzie należy umieścić linię parametru. Sztuczka Inkscape opisana przez Martinę rozwiązała ten problem, ale mam ich kilka do zrobienia i nie chciałem otwierać i zapisywać każdego w Inkscape, więc postanowiłem spróbować prób i błędów. Patrząc na kod, zauważyłem, że informacje o wersji i metadane były na górze, a instrukcje kształtu były na dole ujęte w cudzysłów, które były ograniczone na początku <g><path d=(niektóre mają <g><g><path d=), a na końcu przez /></g></svg>. Po krótkich eksperymentach odkryłem, że umieszczenie linii parametru między pathad=działało, ale ikona była niewidoczna w okienku wyboru, a ikona w okienku podglądu u góry była całkowicie wypełniona na czarno. Problem z niewidoczną ikoną wydaje się być błędem. Naprawiłem to, dodając parametr krycia, który opiszę poniżej. Okazało się, że czarne wypełnienie było tylko dlatego, że ikona miała tylko 4 mm i była wypełniona tylko konturem. Aby to naprawić, podniosłem rozmiar ikony do 10 mm (w QGIS) i podniosłem kontur do 0,1 (w Notatniku).

Podsumowanie

Jeśli ikona nie ma nigdzie słów „styl” ani „wypełnij”, ale ma tę linię <g><path d=(lub <g><g><path d=) tuż przed instrukcjami kształtu, możesz dodać parametry edycji, zastępując powyższą linię słowem<g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=

Jeśli ramka jest zbyt gruba, możesz ją zmniejszyć, zmieniając ostatnią liczbę na ułamek, np <g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 0.5" d=

Jeśli chcesz, aby ikona była półprzezroczysta, możesz to zrobić, zmieniając powyższą linię na tę <g><path style="opacity:0.5;fill:param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=. Wartość krycia może wynosić od 1 (całkowicie nieprzezroczysta) do 0 (całkowicie przezroczysta) i można użyć setnych, a nawet tysięcznych dla dodatkowej precyzji (np. 0,01). Ta sama zasada dotyczy grubości obramowania.

Jeśli masz ich wiele do edycji, możesz znaleźć pliki wsadowe tutaj na StackExchange, aby zautomatyzować proces wyszukiwania i zamiany.