如何在svg中並排放置兩個<g>？

大家好我是新的html5和svg tag.I想問一個關於svg html元素的問題。這裏是我的代碼如何在svg中並排放置兩個<g>？

<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元素，因爲我不能設置g的x和y？任何人都可以通過另一種方式指導我做什麼。

來源

2012-07-04 A_user

<g>元素沒有位置或大小，這就是爲什麼你不能設置x和y，它只是一個邏輯容器。另外，SVG並沒有像HTML那樣真正擁有佈局的概念，這就是你想要實現的。如果你想兩個元素彼此相鄰，just draw them next to each other：

<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-04 08:06:56 robertc

如果你願意，你可以在上使用'transform'屬性。 –

@ErikDahlström是的，但由於''本身沒有位置或大小，轉換隻會明顯影響其子女。你不能改變''的孩子，因此，除非你首先知道所有孩子的位置和大小，否則他們都會被裝入「左欄」。 – robertc

你是對的 - 一個變換沒有定義任何類型的視口或佈局區域。我只想指出，雖然可能沒有x或y屬性，但它實際上可以通過變換進行定位。隨時更新您的答案，我會刪除我的評論。 –

您可以使用變換，那麼問題是如何獲得這樣的值，使在right地方轉化g。一種可能的方法（最簡單的方法）是獲得邊界框座標之間的差異。假設你對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-04 09:12:43 CapelliC

謝謝@chac我會試一試 –

如果只是封裝在一個單獨的SVG標籤中的每個<g>，然後關閉組SVG片段在一個<section>標記中，渲染圖像就像圖像一樣......流向右邊，包裹着我和我的CSS - 我可以通過檢查CSS來弄清楚如果你真的需要這樣做/爲什麼。

來源

2012-09-15 23:06:52 hobs

如何在svg中並排放置兩個<g>？

回答

相關問題