2

Leaflet の Path.SVG.js を変更して、次の SVG マークアップを生成しようとしました。

<svg class=" leaflet-zoom-animated" width="2698" height="318" viewBox="-995 12 2698 318" style="-webkit-transform: translate3d(-995px, 12px, 0);">
<defs>
    <pattern id="rank1" x="0" y="0" height="28pt" width="28pt" patternUnits="userSpaceOnUse">
        <image xlink:href="https://googledrive.com/host/0B9FPQIuJQjY3eTlWMFZBWUxiY1E/pattern5.png" height="28pt" width="28pt">
        </image>
    </pattern>
</defs>
<g>
    <path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="#f03" stroke-opacity="0.7" stroke-width="5" fill="url(#rank1)" class="leaflet-clickable" d="M558,85A42,42,0,1,1,557.9,85 z">
    </path>
</g>
<g>
    <path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="#0033ff" stroke-opacity="0.5" stroke-width="5" fill="url(#rank1)" class="leaflet-clickable" d="M733 118L849 174L925 108z">
    </path>
</g>

ここでの目標は、画像パターンで満たされた多角形をレンダリングすることです。次に、Chrome の要素インスペクタを使用して、生成された SVG マークアップをコピーして貼り付け、ページの body 要素に貼り付けました。ページをリロードすると、次の結果が得られました。

スクリーンショットへのリンク(申し訳ありませんが、現時点で評判が 10 未満です)

マップ内のポリゴンにはグラフィックスの塗りつぶしがありませんが、Leaflet によって生成されたマークアップからポリゴンを下部にコピーして貼り付けただけなので、それらが同じマークアップであると 100% 確信しています。

マップ内のポリゴンで塗りつぶしグラフィックがレンダリングされない理由はありますか?

4

1 に答える 1

1

いくつかのポイント:

  • SVG はほとんどの CSS ユニットを認識しません。SVG 要素内の「pt」を取り除く必要があります。
  • SVG要素を閉じていません
  • あなたの画像への参照 404's for me

これらの問題を修正し、有効な画像 URL を使用すると、正常に機能します。

于 2016-11-19T17:27:17.490 に答える