0

こんにちは、html5 と svg タグは初めてです。svg html 要素について質問したいです。これが私のコードです

<html>
 <div>
   <svg width = "1335" height = "400">
     // I want to have two svg:g side by side one of more width and second of less width
        such that width of svg = first g + second g
      <g>
          // All the elements inside g should have same width as g
      </g>
      <g>
      </g> 
   </svg>
 <div>
</html>

transform.But を使用して試してみましたが、失敗しました。g の x と y を設定できないため、2 つの g 要素を並べることは可能ですか? これを別の方法で行う方法を教えてもらえますか。

4

4 に答える 4

2

g変換を使用できます。問題は、そのright場所で変換を行うような値を取得する方法です。考えられる方法（最も簡単な方法）は、境界ボックスの座標の差を取得することです。グループG1のバウンディングボックスBB1とG2のBB2があるとすると、G2に適用される変換を計算できます。

もちろん、その計算ランタイムを実行するためのスクリプトが必要です。そのようなスクリプトは使用します

var BB1 = document.getElementById("G1").getBBox()

ここにコード

<svg>
    <script>
        function align(evt) {
            var G1 = document.getElementById("G1")
            var G2 = document.getElementById("G2")
            var BB1 = G1.getBBox()
            var BB2 = G2.getBBox()
            G2.setAttribute("transform", "translate("+ ((BB1.x+BB1.width)-BB2.x) + " " + ((BB1.y+BB1.height)-BB2.y) + ")")
        }
    </script>                
    <g id="G1">
        <rect fill="red" x="10" y="10" width="40" height="30" />
    </g>
    <g id="G2" onclick="align(evt)">
        <rect fill="blue" x="70" y="60" width="100" height="50" />
    </g>
</svg>

あなたはそれでjsFiddleで実験することができます

于 2012-07-04T09:12:43.947 に答える
0

<g>それぞれを別々のタグで囲み、タグSVG内のSVGフラグメントのセットを閉じると<section>、レンダリングは画像のようにレイアウトされます...右に流れて、私と私のCSSをラップします-私はあなたが本当にそれを必要とするかどうか/なぜそれを理解するためのCSS。

于 2012-09-15T23:06:52.123 に答える
0

<g>要素には位置もサイズもありません。そのため、設定できません。xこれyは単なる論理コンテナーです。また、SVG には、HTML と同じようにレイアウトの概念が実際にはありません。これは、達成しようとしているように見えます。2 つの要素を隣り合わせにする場合は、それらを隣り合わせに描画します。

<svg width = "1335" height = "400">
    <rect x="0" y="0" width="667" height="400" fill="#0f0"/>
    <rect x="668" y="0" width="667" height="400" fill="#00f"/>
</svg>
于 2012-07-04T08:06:56.280 に答える
0

SVG によるアイルランドの旗の簡単な例

<!DOCTYPE html>
<html>
    <body>
        <h1>Irish Flag SVG image</h1>
        <svg version="1.1"
             baseprofile="full"
             width="300" height="200"  
             xmlns="http://www.w3.org/2000/svg">

            <!--creating rect side by side for irish flag -->
            <rect x="0" y="0" width="300" height="200" fill="green"/>
            <rect x="100" y="0" width="300" height="400" fill="white"/>
            <rect x="200" y="0" width="300" height="400" fill="orange"/>
        </svg>

    </body>
</html>
于 2018-10-04T10:58:44.327 に答える