Bagaimana cara membuat simbol svg yang memiliki warna isian, warna goresan dan lebar goresan yang dapat dimodifikasi?

Saya ingin membuat beberapa simbol svg untuk Qgis menggunakan Inkscape, simbol-simbol itu harus memiliki atribut seperti yang dijelaskan dalam pertanyaan. Selama dua hari terakhir, saya telah bereksperimen seperti yang diinstruksikan oleh Sourcepole dan menirukan beberapa simbol yang dibundel dengan qgis yang memiliki atribut yang diinginkan tanpa hasil.

Akhirnya saya bereksperimen dengan bentuk simbol yang paling sederhana: Saya membuat svg yang hanya berisi lingkaran di Inkscape dan mencoba memodifikasinya.

File asli ( circle.svg ) memiliki baris ini:

<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"

Saya memodifikasinya menjadi:

<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"

Disimpan sebagai circle_modified.svg dan memilihnya sebagai simbol titik, tetapi Qgis tidak dapat mengubah ketiga parameter secara bersamaan.

Apa yang saya lakukan salah atau harus saya lakukan secara berbeda?

Sistem saya: Qgis 1.8.0 pada Ubuntu 12.04 64 bit, Inkscape 0.48, editor teks Gedit 3.4.1.

Untuk membuat simbol SVG dengan warna isian yang dapat dimodifikasi , warna goresan dan lebar goresan di QGIS, Anda harus mengganti atribut style dari elemen path dengan 3 atribut ini:

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

Jika Anda menggunakan InkScape, setelah menulis file SVG yang baru, edit file dan ganti seluruh baris yang dimulai dengan style:

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

dengan baris berikut:

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

Saya juga ingin melakukan ini sejak mengetahui cara menambahkan simbol SVG kemarin , tetapi semuanya berwarna hitam. Jawaban yang diberikan oleh jgrocha works - Saya ingin memilihnya tetapi baru saja bergabung dengan forum GIS, saya harus mendapatkan reputasi terlebih dahulu!

Saya juga menemukan halaman ini yang mengkonfirmasi jawabannya: SIMBOL SVG DI QGIS DENGAN WARNA YANG MUDAH DIUBAH

Untuk memiliki kemungkinan untuk mengubah warna marker, kita harus menambahkan param placeholder '(fill)' untuk color fill, 'param (outline)' untuk warna outline dan 'param (outline-width)' untuk lebar goresan. Tempat penampung ini secara opsional dapat diikuti oleh nilai default:

<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>`

Terima kasih!

Tampaknya layak memberikan jawaban sederhana tentang dasar-dasar SVG untuk pergi bersama rincian yang disediakan di sini tentang spesifik di sekitar perangkat lunak ...

File SVG hanyalah file teks. Akhiran file akan menjadi .svg tetapi dapat dibuka di editor teks sama seperti file dengan akhiran .txt

File svg sederhana terlihat seperti ini:

<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>

Dalam hal ini Anda dapat melihat bahwa warna ditentukan oleh parameter (di mana titik-titik diganti dengan karakter antara 0-9 atau AF):

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

Dan lebar goresan ditentukan oleh

stroke-width="..."

Berikut ini dapat ditambahkan, menggunakan editor teks, untuk menggantikan nilai apa pun yang Anda pilih dalam SVG ... memungkinkan nilai-nilai tersebut diatur oleh QGIS. QGIS memahami nilai untuk 'param (fill)' - dan nilai 'param (...)' lainnya - karena ini ditetapkan oleh QGIS sendiri.

Isi warna: fill="param(fill) #FFF"

Garis / warna garis: stroke="param(outline) #000"

Garis / lebar garis: stroke-width="param(outline-width) 1"

Isi opacity: fill-opacity="param(fill-opacity)"

Garis / opacity garis: stroke-opacity="param(outline-opacity)"

Perhatikan bahwa tidak ada yang menghentikan Anda menggunakan nilai-nilai 'param (...)' di tempat-tempat yang sedikit aneh - jadi misalnya Anda bisa menggunakan nilai 'param (op-opacity)' untuk menentukan warna isian dalam satu bit File SVG, tetapi warna garis / stroke pada bit SVG lainnya.

Dalam komposer QGIS atau dialog simbol gaya pengaturan untuk warna SVG cukup jelas. Opacity fill dan stroke / line diatur sebagai bagian dari pengaturan warna. Pengaturan goresan / lebar garis jelas.

Terakhir dua poin

Pertama, perhatikan bahwa sementara dalam SVG itu valid untuk menentukan warna sebagai kumpulan atribut seperti:

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

Ini tampaknya tidak berfungsi dengan baik jika Anda menyertakan parameter seperti dijelaskan di sini.

Kedua, ketika menggunakan perangkat lunak seperti Illustrator atau Inkscape banyak atribut tambahan dapat ditambahkan ke teks SVG oleh perangkat lunak ini. Jika Anda tahu apa yang Anda lakukan dan memahami dasar-dasar SVG seperti di atas, mungkin akan lebih mudah jika Anda menyingkirkan teks tambahan ini. Khususnya Anda mungkin menemukan bahwa warna diatur melalui definisi gaya daripada item demi item.

Saya juga memiliki masalah yang sama tetapi setelah beberapa upaya akhirnya berhasil. Saya menulis di sini prosedur berharap ini akan membantu. Saya membuat spiral sederhana di inkscape dan menyimpannya sebagai svg. Kemudian saya membukanya di editor teks (mis. Notepad ++) dan entri "style" muncul dua kali dalam kode svg saya. Pertama di bagian ini:

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

Dan kemudian di sini:

<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" />

Untuk membuat kode berfungsi agar spiral svg yang dapat diedit di qgis, saya sepenuhnya menghapus entri "style" pertama dari potongan kode pertama:

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

Dan gantikan entri "style" kedua dalam potongan kode kedua sebagai berikut:

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

"# 000" dan "#FFF" adalah dua warna default untuk fill dan outline sementara "1" adalah lebar outline default jika tidak ditentukan secara berbeda. Setelah menyimpan perubahan ini, Anda dapat menyimpan svg di jalur yang benar, yang ditentukan oleh QGis (tergantung pada versi yang dapat ditemukan di Pengaturan -> Opsi -> jalur SVG). Akhirnya objek svg baru Anda akan muncul di antara objek default lainnya dan itu akan dapat diedit.

Semoga bisa membantu

Saya akan memperluas ini karena butuh beberapa saat untuk membuatnya bekerja. Buat simbol Anda dan simpan sebagai Inkscape SVG dan buka di editor teks. Di blok kode bawah Anda akan melihat; style = "fill: # 00a000; fill-opacity: 1; stroke: # 000000; stroke-width: 1; (...)" Ganti baris ini dengan; fill = "param (fill) #FFF" stroke = "param (outline) # 000" stroke-width = "param (garis-lebar) 1" Dalam file SVG saya, garis gaya muncul untuk setiap entitas atau bentuk di svg dan mengganti garis-garis itu tidak berhasil untuk saya; tetapi melakukannya di bagian bawah pada Inkscape SVG berhasil. Saya mencoba solusi saya dan petunjuk di sini pada format Dioptimalkan dan Plain SVG tetapi tidak berhasil, semoga ini membantu. Inkscape 0.48, QGIS 2.12.0, NotePad ++

Tampaknya menjadi masalah, jika kita menggunakan nilai yang tepat. Setiap kali kami membuka opsi, nilai individual untuk warna atau goresan direset ke yang ada di SVG. Ini dapat diperbaiki dengan menetapkan nilai dalam opsi lanjutan. Tes saya menunjukkan kepada saya, akan lebih baik untuk menggunakannya fill="param(fill)"daripada fill="param(fill) #FFF"dan seterusnya di SVG.

Solusi lain yang menarik: Jika Anda memiliki SVG dengan warna foreground dan background, Anda dapat menggunakan warna stroke sebagai warna latar belakang isian Anda. Perhatikan, maka Anda tidak dapat menggunakan warna outline terpisah untuk keseluruhan SVG.

Terima kasih semuanya. Ada beberapa tips hebat di sini dan mereka menunjuk saya ke arah yang benar tetapi tidak ada yang membahas masalah spesifik saya jadi saya akan menambahkan apa yang saya temukan ke dalam panci. Karena sepertinya tidak ada satu jawaban yang tepat untuk setiap kasus, saya ingin menawarkan saran terlebih dahulu untuk menguji hasil Anda secepat mungkin.

Pengujian Edit Cepat

• Pindahkan sementara semua ikon svg Anda dari folder svg QGIS.
• Buat salinan dari file svg yang ingin Anda kerjakan hanya baca agar Anda tidak menimpanya dan memasukkan versi yang dapat diedit ke dalam folder svg QGIS.
• Buka QGIS, muat layer titik untuk dikerjakan, buka properti layer dan pilih "SVG marker".
• Anda juga dapat mengklik kanan pada file svg dan mengatur sementara program "Open with" default ke Notepad sehingga Anda dapat mengklik dua kali saja untuk mengeditnya di Notepad.

Dengan pengaturan ini, Anda dapat segera melihat bagaimana QGIS merespons suntingan Anda. Biarkan file svg terbuka di Notepad dan panel properti terbuka di QGIS. Untuk menguji hasil edit, cukup tekan Ctrl + S untuk menyimpannya di Notepad dan beralih ke QGIS. Untuk memuat ulang svg, ubah jenis layer simbol ke hal lain, lalu ubah kembali ke penanda SVG. Hanya ada satu di sana sehingga Anda tidak kesulitan menemukannya. Saya menguji lusinan pengeditan dengan sangat cepat seperti ini. Jika Anda memiliki masalah mendapatkan svg kembali ke bentuk sumber setelah diedit Anda bisa menghapusnya dan membuat salinan lain.

Membuat Ikon SVG Dapat Diedit

Masalah yang saya miliki adalah bahwa ikon spesifik yang sedang saya kerjakan tidak memiliki kata "style" atau "fill" di mana saja sehingga saya kesulitan mencari tahu di mana harus meletakkan baris parameter. Trik Inkscape yang dijelaskan oleh Martina memecahkan masalah ini, tetapi saya memiliki banyak yang harus dilakukan dan saya tidak ingin membuka dan menyimpan masing-masing di Inkscape jadi saya memutuskan untuk mencoba coba-coba. Melihat kode saya dapat melihat bahwa info versi dan metadata berada di bagian atas dan instruksi bentuk berada di bagian bawah terlampir dalam tanda kutip yang dibatasi pada awal oleh <g><path d=(sebagian memiliki <g><g><path d=) dan pada akhirnya oleh /></g></svg>. Setelah sedikit bereksperimen, saya menemukan bahwa menempatkan garis parameter antara pathdand=berfungsi tetapi ikon itu tidak terlihat di panel pemilih dan ikon di panel pratinjau di bagian atas sepenuhnya diisi dengan warna hitam. Masalah ikon yang tak terlihat tampaknya adalah bug. Saya memperbaikinya dengan menambahkan parameter opacity yang akan saya jelaskan di bawah ini. Ternyata isian hitam itu hanya karena ikonnya hanya 4mm dan hanya diisi oleh garis besarnya. Untuk memperbaikinya saya menabrak ukuran ikon hingga 10mm (di QGIS) dan menabrak garis besar ke 0,1 (di Notepad).

Ringkasan

Jika ikon Anda tidak memiliki kata "style" atau "fill" di mana saja, tetapi ikon tersebut memiliki garis ini <g><path d=(atau <g><g><path d=) tepat sebelum instruksi bentuk, Anda harus dapat menambahkan parameter edit dengan mengganti baris di atas dengan<g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=

Jika perbatasan terlalu tebal, Anda dapat mengecilkannya dengan mengubah angka terakhir menjadi pecahan misalnya <g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 0.5" d=

Jika Anda ingin membuat ikon semitransparan, Anda dapat melakukannya dengan mengubah baris di atas menjadi yang ini <g><path style="opacity:0.5;fill:param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=. Nilai opacity dapat dari 1 (sepenuhnya buram) ke 0 (sepenuhnya transparan) dan Anda dapat menggunakan ratusan atau bahkan ribuan untuk presisi tambahan (misalnya 0,01). Aturan yang sama berlaku untuk ketebalan perbatasan.

Jika Anda memiliki banyak untuk diedit, Anda dapat menemukan file batch di sini di StackExchange untuk mengotomatiskan proses pencarian dan penggantian.