Question

我正在尝试编写一个SVG页面，其中我们有一个图标，右边是一个动态文本（这两者之间的距离是固定的）。图标具有固定的宽度和高度，但文本的宽度可能不同。

两个元素都被一个组包围，它们应该在那里居中。该组还包含一个也居中的自由文本。

.-------------------------------------.
|                                     |
|             some text               |
|                                     |
|   .----.                            |
|   |    |  blah blah blah blah blah  |
|   `----´                            |
`-------------------------------------´

.-------------------------------------.
|                                     |
|             some text               |
|                                     |
|        .----.                       |
|        |    |  blah blah blah       |
|        `----´                       |
`-------------------------------------´

有人欣赏我的ASCII技能吗？ ;）

我的方法是将图标和文本编译成一个组，然后将其中心放入父组。标题文本也是。

我读到我可以将文章集中在一个组中，但我找不到对齐图像或实际组的方法。

<g id="MainGroup">      
  <text id="InfoText" x="90" y="0" width="320" text-anchor="middle" font-size="20" fill="#FFFFFF"/>
  <g x="90" y="0" width="320" text-anchor="middle">
    <image id="UserIcon" x="0" y="25" width="48" height="48"/>
    <text id="Username" x="58" y="55" font-size="22" fill="#FFFFFF"/>
  </g>    
</g>

我该怎么做？

请注意，我对这个SVG的东西完全不熟悉，所以我可能会错过这个显而易见的东西。如果我错过了你需要的一些信息，请随时提出要求。

Answer 1

SVG中没有内置对齐方式。你必须通过javascript使用getBBox方法来获得你想要居中的项目的宽度和容器的宽度，然后通过设置所包含项目的x属性来自己居中。

这是一个例子

<svg width="320" height="200" onload="go()">
<g id="MainGroup">
  <rect stroke="black" width="100%" height="100%" fill="none"/>
  <text id="InfoText" x="160" y="30" text-anchor="middle" font-size="20" fill="black">some text</text>
  <g id="SubGroup" text-anchor="left">
    <rect id="UserIcon" x="0" y="25" width="48" height="48" fill="red" />
    <text id="Username" x="50" y="55" font-size="22" fill="black">blah blah blah</text>
  </g>    
  <g id="SubGroup2" text-anchor="left">
    <rect id="UserIcon" x="0" y="25" width="48" height="48" fill="red" />
    <text id="Username" x="50" y="55" font-size="22" fill="black">blah blah blah blah blah</text>
  </g>    
</g>
<script>
  function centre(element, y) {
      element.setAttribute("transform",
                            "translate(" + (320 - element.getBBox().width) / 2 + ", " + y + ")");
  }
  function go() {
      centre(document.getElementById("SubGroup"), 30);
      centre(document.getElementById("SubGroup2"), 100);
  }
</script>
</svg>

对齐SVG容器中的多个元素

1 个答案: