Выровнять несколько элементов в SVG-контейнере - PullRequest
Новая
       28

Выровнять несколько элементов в SVG-контейнере

5 голосов
/ 19 декабря 2011

Я пытаюсь написать 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-материале, поэтому я могу упустить очевидное.Если я пропустил некоторую информацию, которая вам нужна, не стесняйтесь спрашивать ее.

1 Ответ

2 голосов
/ 19 декабря 2011

В SVG нет встроенного выравнивания.Вы должны будете использовать метод getBBox через javascript, чтобы получить ширину элемента, который вы хотите центрировать, и ширину контейнера, а затем выполнить центрирование самостоятельно, установив атрибуты 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>
...