1

Как задать или получить координаты получить координаты каждго елемента в теге svg ?

Например получить координаты каждго елемента в теге Вот пример разметки :

<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve">
    <rect fill="#ED2224" stroke="#000000" stroke-miterlimit="10" width="80" height="80"/>
    <rect x="80" y="80" fill="#ED2224" stroke="#000000" stroke-miterlimit="10" width="80" height="80"/>
    <rect x="160" y="160" fill="#ED2224" stroke="#000000" stroke-miterlimit="10" width="80" height="80"/>
    <rect x="240" y="240" fill="#ED2224" stroke="#000000" stroke-miterlimit="10" width="80" height="80"/>
    <rect x="400" y="240" fill="#ED2224" stroke="#000000" stroke-miterlimit="10" width="80" height="80"/>
    <rect x="400" y="320" fill="#ED2224" stroke="#000000" stroke-miterlimit="10" width="80" height="80"/>
    <rect x="480" y="320" fill="#ED2224" stroke="#000000" stroke-miterlimit="10" width="80" height="80"/>
    <rect x="560" y="320" fill="#ED2224" stroke="#000000" stroke-miterlimit="10" width="80" height="80"/>
    <rect x="640" y="320" fill="#ED2224" stroke="#000000" stroke-miterlimit="10" width="80" height="80"/>
    <rect x="560" y="480" fill="#ED2224" stroke="#000000" stroke-miterlimit="10" width="80" height="80"/>
    <rect x="560" y="560" fill="#ED2224" stroke="#000000" stroke-miterlimit="10" width="80" height="80"/>
    <rect x="400" y="480" fill="#ED2224" stroke="#000000" stroke-miterlimit="10" width="80" height="80"/>
    <rect x="400" y="560" fill="#ED2224" stroke="#000000" stroke-miterlimit="10" width="80" height="80"/>
    <rect x="640" y="640" fill="#ED2224" stroke="#000000" stroke-miterlimit="10" width="80" height="80"/>
    <rect x="560" y="640" fill="#ED2224" stroke="#000000" stroke-miterlimit="10" width="80" height="80"/>
    <rect x="400" y="640" fill="#ED2224" stroke="#000000" stroke-miterlimit="10" width="80" height="80"/>
</svg>
5
  • Например получить координаты каждго елемента в теге <svg> 17 авг 2015 в 10:13
  • Та разметка, что вы привели, не валидна. В этом легко убедится с помощью validator.w3.org/check 17 авг 2015 в 10:25
  • @Dmitriy Simushev Я привел в пример только часть разметки (чтоб было понятно , что я хочу. По этому выбивает , что она не валидна. А вообще то нужны координаты каждого отдельного rect 17 авг 2015 в 10:27
  • Вы ведь понимаете, что правильный код может не работать на невалидной разметку? И как по-вашему тогда убедится в правильности решения? 17 авг 2015 в 10:29
  • @Dmitriy Simushev извините , исправил. 17 авг 2015 в 10:40

1 ответ 1

5

У SVG элементов есть аттрибуты x и y. Именно они определяют позицию элемента. Подробное описание свойств доступно, например, в MDN:

x: https://developer.mozilla.org/ru/docs/Web/SVG/Attribute/x
y: https://developer.mozilla.org/ru/docs/Web/SVG/Attribute/y

Теперь о том как с этим работать. Если вы используете jQuery, то можно, например, так:

$('rect').each(function() {
    var $el = $(this),
        x = parseInt($el.attr('x'), 10) || 0,
        y = parseInt($el.attr('y'), 10) || 0;

   // Можно вывести значения в консоль.
   console.log(x + ': ' + y);

   // А можно сместить каждый из элементов.
   $el.attr('x', x + 5);
   $el.attr('y', y + 5);
});
0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.