SVGパス経由でカスタムgoogle mapsマーカー

Question

私は現在、別のStackOverflow投稿で取り上げたSVGパスからGoogleマップマーカーとして赤い円を使用しています。

new google.maps.Marker({ 
    map:map, 
    icon:{ 
     path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0", 
     fillColor: '#ff0000', 
     fillOpacity: .6, 
     anchor: new google.maps.Point(0,0), 
     strokeWeight: 0, 
     scale: 1 
    } 
}); 

私はこれを改訂し、四角の枠線から外側に延びる白い緯度&長い行と空の赤の広場としての私のマーカーを描きたいのですが、それは次のように、もう少し面白そうですAdobe Photoshopのからこのスケッチ：

私は（この結果を達成するために私の現在のアイコンを操作する方法は非常にわからないんだけど、白の2つのラインについて赤の1つの正方形、3つの異なるアイコンが必要だと思われますが、正方形のエッジから外側に向かってどのように線を延長するかはわかりません）。

Answer 1

これはマークアップで書かれたばかりのバニラ・シンプルなものでしたが、コンセプトには最低でも2つのパスが必要です（同じ色であれば1つで済ませることができます）。しかし、それが私には不明瞭です。この定義がSVGを定義する表記であれば、 -

icon:{ 
    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0", 
    fillColor: '#ff0000', 
    fillOpacity: .6, 
    anchor: new google.maps.Point(0,0), 
    strokeWeight: 0, 
    scale: 1 
} 

複数のパスが可能になります。私はちょうど現在のものの下に追加のパスを追加しようとします。

「線を伸ばす」最も簡単な方法は、画面の幅の少なくとも2倍にすることです。そのため、アイコンが画面の端にドラッグされている場合でも常に表示されます。一種の粗末な解決策ですが、それはうまくいくでしょう（Googleマップがsvgのviewbox属性を修正しないと仮定します）。 適切な方法は、svgフィルタやクリップパス（https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path）を含むだろうが、私はGoogleマップのアイコンがそのような機能を可能にするとは思わない。

以下に示す単一パスの解決策 - 赤い四角形の解決策は同様ですが、赤い四角形を灰色の四角形の部分に重ねるだけで、灰色の四角形の部分をわずかに「薄く」して下から突き出ないようにします赤色