変更可能な塗りつぶしの色、ストロークの色、ストロークの幅を持つsvgシンボルを作成する方法は?


39

Inkscapeを使用してQgisのsvgシンボルを作成したいのですが、これらのシンボルには質問で説明されている属性が必要です。過去2日間、私はSourcepoleの指示に従って実験を行っており、いくつかのシンボルが、成功せずに望ましい属性を持つqgisにバンドルされているのを模倣しました。

最後に、最も単純な形式のシンボルを試しました。Inkscapeで円のみを含むsvgを作成し、修正しようとしました。

元のファイル(circle.svg)には次の行があります。

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

私はそれを次のように変更しました:

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

circle_modified.svgとして保存し、ポイントシンボルとして選択しましたが、Qgisは3つすべてのパラメーターを同時に変更できませんでした。

何を間違えたのか、または別の方法ですべきですか?

私のシステム:Ubuntu 12.04 64ビット上のQgis 1.8.0、Inkscape 0.48、Gedit 3.4.1テキストエディター。

回答:


44

QGIS で変更可能な塗りつぶし色ストロークの色、およびストロークの幅でSVGシンボルを作成するには、path要素のstyle属性を次の3つの属性に置き換える必要があります。

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

InkScapeを使用している場合は、新しいSVGファイルを書き込んだ後、ファイルを編集し、行全体をスタイルで置き換えます:

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

次の行で:

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

QGISでそれらの行を追加する場所は?
-newGIS

2
.svgファイルをテキストエディターで開き、このコード行を追加できます。
ディオゴカリブ

2
答えてくれてありがとう!それを私のために機能させるためclass="st3"ではなくstyle="fill:#00a...、変更しなければなりfill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1"ませんでした。(イラストレーターでsvgを作成しました。)
ヘンリック

4

昨日SVGシンボルを追加する方法を見つけたので、これもやりたかったのですが、それらはすべて黒でした。jgrochaの答えは機能します-投票したかったのですが、GISフォーラムに参加したばかりなので、まず評判を得る必要があります!

また、答えを確認するこのページを見つけました:修正可能な色のQGISのSVGシンボル

マーカーの色を変更できるようにするには、塗りつぶし色にプレースホルダー「param(fill)」、アウトライン色に「param(outline)」、ストローク幅に「param(outline-width)」を追加する必要があります。これらのプレースホルダーには、オプションでデフォルト値を続けることができます。

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

ありがとう!


QGISでそれらの行を追加する場所は?
-newGIS

4

SVGの基本についての簡単な答えを提供する価値があるようです。ここでは、ソフトウェアに関する詳細についてここで提供されている詳細を説明します。

SVGファイルは単なるテキストファイルです。ファイルの末尾は.svgになりますが、末尾が.txtのファイルと同じテキストエディターで開くことができます

シンプルなsvgファイルは次のようになります。

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

これで、色がパラメータによって定義されていることがわかります(ドットは0〜9またはA〜Fの文字に置き換えられます)。

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

そして、ストロークの幅は

stroke-width="..."

テキストエディタを使用して以下を追加して、SVGで選択した定義済みの値を置き換えることができます。これにより、QGISで値を設定できるようになります。QGISは「param(fill)」の値と他の「param(...)」の値を理解します。これらはQGIS自体によって設定されるためです。

塗りつぶし色: fill="param(fill) #FFF"

アウトライン/線の色: stroke="param(outline) #000"

アウトライン/線幅: stroke-width="param(outline-width) 1"

不透明度を埋める: fill-opacity="param(fill-opacity)"

アウトライン/ラインの不透明度: stroke-opacity="param(outline-opacity)"

「param(...)」値を少し奇妙な場所で使用するのを止めるものは何もないことに注意してください-たとえば、「param(fill-opacity)」値を使用して、 SVGファイルですが、SVGの別のビットにストローク/線の色があります。

QGISコンポーザーまたはスタイルシンボルダイアログでは、SVG色の設定はかなり明白です。塗りと線/線の不透明度は、色設定の一部として設定されます。ストローク/線幅の設定は明らかです。

最後に2点

まず、SVGでは、色を次のような属性のコレクションとして定義することが有効であることに注意してください。

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

ここに説明されているようにパラメータを含める場合、これは正しく機能しないようです。

次に、IllustratorやInkscapeなどのソフトウェアを使用する場合、このソフトウェアによってSVGテキストに多くの追加属性を追加できます。あなたがしていることを知っていて、上記のSVGの基本を理解しているなら、この追加のテキストを取り除くと、生活がより簡単になるかもしれません。特に、アイテムごとにではなく、スタイルの定義によって色が設定されることがあります。


3

私も同じ問題を抱えていましたが、いくつかの試みの後、最終的に機能しました。ここで、何らかの助けになることを期待して手順を書いています。inkscapeで単純なスパイラルを作成し、svgとして保存しました。次に、テキストエディタ(Notepad ++など)でそれを開いたところ、svgコードで「style」というエントリが2回発生しました。このチャンクの最初:

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

そしてここに:

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

qgisで編集可能なsvgスパイラルを持つためにコードを機能させるために、最初のコードチャンクから最初の「スタイル」エントリを完全に削除しました。

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

次のように、2番目のコードチャンクの2番目の「スタイル」エントリを置き換えます。

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

「#000」と「#FFF」は塗りつぶしとアウトラインの2つのデフォルト色で、「1」は特に指定しない限りデフォルトのアウトライン幅です。これらの変更を保存したら、QGisで指定された正しいパスにsvgを保存できます(バージョンに応じて、[設定]-> [オプション]-> [SVGパス]にあります)。最後に、新しいsvgオブジェクトが他のデフォルトオブジェクトの中に表示され、編集可能になります。

それが役立つことを願っています


2

これを機能させるのに時間がかかったので、これを拡張します。シンボルを作成してInkscape SVGとして保存し、テキストエディターで開きます。下のコードブロックに表示されます。style = "fill:#00a000; fill-opacity:1; stroke:#000000; stroke-width:1;(...)"この行を; fill = "param(fill)#FFF" stroke = "param(outline)#000" stroke-width = "param(outline-width)1" SVGファイルでは、svgのすべてのエンティティまたはシェイプのスタイルラインが表示され、これらの行を置き換えることは私にとってはうまくいきませんでした。しかし、Inkscape SVGの一番下でそれを行うとうまくいきました。私は最適化されたSVG形式とプレーンSVG形式に関するソリューションと指示をここで試しましたが、うまくいきませんでしたが、これが役立つことを願っています。Inkscape 0.48、QGIS 2.12.0、NotePad ++


2

正確な値を使用する場合、問題があるようです。オプションを開くたびに、色またはストロークの個々の値がSVGの値にリセットされます。これは、詳細オプションで値を設定することで修正できます。私のテストでは、SVGのfill="param(fill)"代わりにfill="param(fill) #FFF"などを使用する方が良いことが示されました。

別の興味深い回避策:前景色と背景色のSVGがある場合、塗りつぶしの背景色としてストロークの色を使用できます。SVG全体に個別のアウトラインカラーを使用することはできません。


1

あなた方全員に感謝します。ここにはいくつかの素晴らしいヒントがあり、正しい方向を教えてくれましたが、私の特定の問題に対処するものはありませんでしたので、私が見つけたものをポットに追加します。すべてのケースに1つの正しい答えがあるとは思えないため、まず、できるだけ早く結果をテストするための提案を提供したいと思います。

高速編集テスト

  • すべてのsvgアイコンを一時的にQGIS svgフォルダーから移動します。
  • 上書きしないように読み取り専用で作業するsvgファイルのコピーを作成し、QGIS svgフォルダーに編集可能なバージョンを配置します。
  • QGISを開き、操作するポイントレイヤーを読み込んで、レイヤープロパティを開き、「SVGマーカー」を選択します。
  • さらに、svgファイルを右クリックし、デフォルトの[プログラムから開く]プログラムを一時的にメモ帳に設定して、それらをダブルクリックしてメモ帳で編集することもできます。

この設定により、QGISが編集にどのように応答するかをすぐに確認できます。メモ帳でsvgファイルを開いたままにし、QGISでプロパティペインを開いたままにします。編集の結果をテストするには、Ctrl + Sを押してメモ帳に保存し、QGISに切り替えます。svgをリロードするには、シンボルレイヤータイプを他のものに変更してから、SVGマーカーに戻します。また、そこには1つしかないため、問題なく見つけることができます。このように数十の編集を非常に迅速にテストしました。編集後にsvgをソースフォームに戻すのに問題がある場合は、それを削除して別のコピーを作成できます。

SVGアイコンを編集可能にする

私が抱えていた問題は、作業中の特定のアイコンに「スタイル」または「塗りつぶし」という言葉がなかったため、パラメーター行をどこに配置するかわからないことでした。Martinaが説明したInkscapeのトリックはこの問題を解決しましたが、私はそれらの束があり、Inkscapeでそれぞれを開いて保存したくなかったので、試行錯誤を試みることにしました。コードを見て私は、バージョン情報とメタデータがトップにあったと形状の命令はで最初に囲まれた引用符で囲まれた下にあったことを見ることができました<g><path d=(一部は持っている<g><g><path d=)とによって終わり/></g></svg>。少し実験した後、パラメータ行pathd=動作しましたが、セレクタペインにアイコンが表示されず、上部のプレビューペインのアイコンが完全に黒で塗りつぶされていました。目に見えないアイコンの問題はバグだったようです。以下で説明する不透明度パラメーターを追加して修正しました。黒の塗りつぶしは、アイコンがわずか4mmで、アウトラインだけで塗りつぶされているためであることがわかりました。これを修正するために、アイコンサイズを最大10mm(QGISで)上げ、アウトラインを0.1(ノートパッドで)下げました。

概要

アイコンに「スタイル」または「塗りつぶし」という単語が含まれていないが、形状指示の直前にこの行<g><path d=(または<g><g><path d=)がある場合、上記の行を次の行に置き換えて編集パラメーターを追加できるはずです。<g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=

境界線が太すぎる場合、最後の数値を分数に変更することで縮小できます。 <g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 0.5" d=

アイコンを半透明にしたい場合は、上記の行をこの行に変更してください<g><path style="opacity:0.5;fill:param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=。不透明度の値は1(完全に不透明)から0(完全に透明)までで、精度を高めるために100分の1または1000分の1を使用できます(0.01など)。同じ規則が境界線の太さにも適用されます。

編集するファイルが多数ある場合は、StackExchangeでバッチファイルを検索して、検索および置換プロセスを自動化できます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.