Question

大家好我是html5和svg tag的新手。我想问一个关于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元素，因为我无法设置g的x和y？任何人都可以指导我这样做。

Answer 1

您可以使用转换，问题是如何获取这些值，使转换后的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进行实验

Answer 2

<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>

Answer 3

如果您只是将每个<g>括在一个单独的SVG标记中，然后在<section>标记内关闭一组SVG片段，那么渲染图就像图像一样。流到右边并为我和我的CSS包装 - 我可以通过CSS来解决如何/为什么如果你真的需要它。

Answer 4

通过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>

如何在svg中并排放置两个<g>？</g>

4 个答案: