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>

我已经尝试过使用转换。但失败了。是否可以并排放置两个 g 元素，因为我无法设置 g 的 x 和 y ？任何人都可以指导我以另一种方式做到这一点。

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>元素没有位置或大小，这就是为什么你不能设置and x，y它只是一个逻辑容器。此外，SVG 并没有像 HTML 那样真正有布局的概念，这就是你想要实现的。如果您想要两个元素彼此相邻，只需将它们彼此相邻绘制：

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