1

緯度/経度投影で地図を取得しました。これは、緯度が高いと非常に平らになります。

ここに画像の説明を入力

見栄えを良くするために、次のように垂直方向に 140% 伸ばすことができることを知っています。

ここに画像の説明を入力

また、SVG 要素とそのコンテンツを D3 でストレッチするにはどうすればよいですか? (CSS は使用できません。これは、基になる SVG 自体が適切ではないためです。ダウンロードできるように、SVG コードを引き伸ばす必要があります)

注: オンライン コード サンプルについては、現時点でインドを入手しました(インドは 106% のストレッチが必要ですが、考え方は同じです)。

4

1 に答える 1

1

SVG 要素は、transform 属性を設定することでスケーリングできます。だからあなたの形のコンテナを取り、

container.setAttribute("transform", "scale(1, 1.4)");

<g>要素などの変形可能なコンテナが必要です。<svg>要素は SVG 1.1 では変換できませんが、今後の SVG 2 仕様では変換可能になります。私の知る限り、これまで SVG 2 のその部分をサポートしているのは Firefox と Opera だけです。

変換可能なコンテナーがないため、SVG 1.1 UA を使用してインドの地図でこれを機能させたい場合は、すべてのパスとテキスト要素に変換を設定できます。

<svg>
  <path transform="scale(1, 1.4).../>
  <path transform="scale(1, 1.4).../>
  <text transform="scale(1, 1.4).../>
</svg>

<svg>それを行うには、要素の子をループする必要があります。

<g>または、階層に要素を挿入することもできます。

<svg>
  <path .../>
  <path .../>
</svg>

になるだろう

<svg>
  <g transform="scale(1, 1.4)">
    <path .../>
    <path .../>
  </g>
</svg>

のすべての子要素を反復処理し、<svg>それらを要素に再親化してから、<g>要素に変換を設定し<g>ます。

于 2013-08-27T09:19:23.003 に答える