0

訪問者の画面解像度に応じて、SVG ファイルから jpg 壁紙を生成する PHP スクリプトを作成しています。壁紙は、円形のグラデーション (長方形) の背景とその上のパスで構成されます。パスを水平方向および垂直方向の長方形の中央に配置するにはどうすればよいでしょうか? 長方形のサイズと比率は一定ではないことに注意してください。背景とパスを別の svg ファイルに分離する必要がありますか、またはパスを中央に配置する簡単な方法はありますか? もしかしてフレームワーク？

4

2 に答える 2

5

これは、ネストされた<svg>要素とpreserveAspectRatio属性を使用することで簡単に実現できます。背景を外側の svg に、パスを内側の svg に配置します。

      <?xml version="1.0" encoding="UTF-8"?>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
    
        <rect id="background" width="100%" height="100%" fill="grey"/>

        <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="100%" height="100%">
          <g>
            <circle cx="15" cy="20" r="10" fill="yellow"/>
            <circle cx="12" cy="17" r="1.5" fill="black"/>
            <circle cx="18" cy="17" r="1.5" fill="black"/>
            <path d="M 10 23 A 8 13 0 0 0 20 23" stroke="black" stroke-width="2" fill="none"/>
          </g>
        </svg>
    
      </svg>

このスニペットを実行して、ウィンドウのサイズを変更してみてください。

これを機能させるために必要なのは、内部<svg>要素の viewBox 属性が正しく設定されていることだけです。

于 2013-06-04T15:33:43.310 に答える
0

パスの座標がわかっている場合は、x/y 座標の合計を取り、座標の数で割ると、座標セットの平均位置が得られます。次に、各座標を、正方形の幅/高さの半分の座標に任意のオフセットを加え、座標セットの中心と正方形の幅/高さの半分の差を引いた値でオフセットします。

これにより、座標が正方形の中心に配置されるはずです (ここではかなり早い時間で、最初のコーヒーを飲み始めたばかりなので、間違っている可能性があります)。もちろん、これは、使用中のすべての変数 (正方形の幅/高さ、適用されるオフセット、およびパスの座標) を知っていることを前提としています。

于 2013-06-03T06:49:15.670 に答える