Блог

Я пытаюсь создать (то, что я думал, будет!) Простой многоразовый фрагмент SVG для отображения трех строк текста с цветом фона — для имитации заметки «post-it».

Я нашел здесь полезный код, чтобы получить границы текста http://my.opera.com/MacDev_ed/blog/2009/01/21/getting-boundingbox-of-svg-elements который я использую.

Итак: я создаю группу текстовых элементов, подобных этой, в разделе «defs» моего SVG:

 <svg id="canvas" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="post_it">
    <text x="0" y="30" id="heading" class="heading">My Heading</text>
    <text x="0" y="45" id="description" class="description">This will contain the description</text>
    <text x="0" y="60" id="company" class="company">Very Big Company Ltd.</text>
    </g>
  

И я отображаю текст с помощью элемента «использовать» следующим образом:

 <use id="12345" class="postit" xlink:href="#post_it" onclick="showId(this);"/>
  

Я использую onclick для запуска вызова следующей функции javascript (определенной в разделе «defs»):

 function showId(elem) {
        post_it_rect=getBBoxAsRectElement(elem);
        document.getElementById('canvas').appendChild(post_it_rect);
}
  

(‘getBBoxAsRectElement (elem)’ взят из ссылки, которую я опубликовал).

В нынешнем виде; это работает просто отлично — однако, если я изменю свой элемент «use», чтобы расположить текст в другом месте, например, так:

 <use x="100" y="100" id="12345" class="postit" xlink:href="#post_it" onclick="showId(this);"/>
  

Теперь текст отображается в правильном месте, но результирующий «цвет фона» (фактически элемент «прямоугольник» с непрозрачностью 0,5) по-прежнему отображается в верхнем левом углу svg-холста, а функция, используемая для вычисления прямоугольника, возвращает «-2», а не «100»(‘-98’?), как мне нужно (я думаю).

Что мне нужно сделать, чтобы выровнять элементы ‘rect’ и текстовые элементы?

Автор сценария (кстати, очень полезная статья) предоставляет более продвинутый скрипт для рисования рамки вокруг любого «bb» в SVG, но я не смог заставить это работать (отсутствуют функции преобразования?).

Я использую Firefox 7.x для рендеринга SVG; И я загружаю файл .svg (т. Е. Не Встроенный в html и т. Д.) Прямо с диска, Чтобы проверить это).

Да, вам может потребоваться компенсировать атрибуты x и y в <use> элементе на данный момент, я постараюсь найти время для обновления сообщения в блоге и сценария.

Вот черновик теста SVG 1.1, который, помимо прочего, проверяет, включены ли атрибуты x и y в bbox. Строка, начинающаяся с [myUse], проверяет этот случай, если она красная, то этот подтест не удался. Chromium и Opera Next оба проходят этот подтест, в то время как Firefox nightly и IE9 — нет. Обратите внимание, что сам тест еще не прошел полную проверку и что он все еще может измениться.