GoogleマップポリゴンSVGパス

Question

に私はGoogle MapsのAPIで、次のポリゴンを描画座標を持っていますこの投稿のメルカトル投影式：Convert a Google Maps polygon path to an SVG path、私はこのような負の値を持つSVGパスを取得します：

M-50.559802168888886,121.46151557464762 -50.589327502222226,121.46285530595195 -50.643108835555566,121.428264939842 ... 

そのパスを描画しようとすると、画像は表示されません。 SVG画像を反転さ

：私は、負の記号を削除するとただし、次のSVG画像を表示します。正しい値を得るために数式を変更する方法はありますか？私はSVGパスをきれいにする必要があります。つまり、CSSで画像を反転することはできません。

ありがとうございます。 （SVGなFileFormatに）あなたの実際のSVG出力を見ずに

Answer 1

は、問題がどこにあるとは言い難いです。間違った座標変換、間違ったエンコーディングになる可能性があります。

1. SVGエクスポートに示されていない画像の最も頻繁な原因は、これが私のSVG輸出の1（使用するガラスメッシュプロファイルの2Dスライスです。たとえば、間違っているか、いないビューポート

   です）いくつかの機械のための入力として：

   <svg width="512" height="512" viewBox="-84.609371 -84.500872 461.177478 1568.45906" stroke-width="1.5px" stroke="black" fill="none" > 
   <path stroke="blue" stroke-width="1px" d="M 285.581417 0.067317 l 6.4185 12.837 l -3.2093 1386.3928 l -0.000617 0.092881 l -288.79 -0.039845 "/> 
   <path stroke="red" stroke-width="1px" d="M 285.581417 0.067317 l -38.5109 1222.7214 l -16.0462 22.4647 l -41.7202 16.0462 l -189.3453 0 "/> 
   </svg> 
   

   

   特に最初の行を見てください。 SVGにそれがあるかどうか確認してください。 viewBoxプロパティは、スペースのどの部分が表示されるかを選択し、width,heightは、viewBoxがマップされる出力イメージ解像度です。アスペクト比を維持するためにブースを設定する必要があります。

2. ミラー×（フリップ）が非常に簡単に行われますが、私はせずに全体を反転する変換で<g>タグを追加しました見ることができるように再び

   <svg width="512" height="512" viewBox="-84.609371 -84.500872 461.177478 1568.45906" stroke-width="1.5px" stroke="black" fill="none" > 
   <g transform="scale(-1.0,1.0) translate(+84.609371,0.0) translate(-461.177478,0.0)"> 
       <path stroke="blue" stroke-width="1px" d="M 285.581417 0.067317 l 6.4185 12.837 l -3.2093 1386.3928 l -0.000617 0.092881 l -288.79 -0.039845 "/> 
       <path stroke="red" stroke-width="1px" d="M 285.581417 0.067317 l -38.5109 1222.7214 l -16.0462 22.4647 l -41.7202 16.0462 l -189.3453 0 "/> 
   </g> 
   </svg> 
   

   

   を同じ例を参照してくださいpath座標を変更します。私はscaleと2x translateを使用します（1つではできますが、値の出所を示したい）matrixを代わりに使用することもできます。スケールはちょうどx軸を逆転し、画像をシフトして、再び中心合わせされるように変換します...

したい場合は、[EDIT1]パスに「クリーン」のポイントは

は、その後、あなたはそう適用されます...（のようなM,L）は絶対値を意味し、それらに直接ので、大文字変換を適用する必要がありますそれらの両方のスケールと翻訳。小文字は相対的な値を意味するので、スケールだけを適用するとうまくいくはずです。もう1つの方法は、エクスポートする入力ポリゴンにSVGの代わりにこれを適用することです。