Как манипулировать трансляционными преобразованиями на элементе SVG с javascript в chrome?

Я хочу манипулировать атрибутом transform="translate(x,y)" элемента SVG с помощью JavaScript.

Итак, я получил этот код HTML:

<body>

<svg id="test" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100% 100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect transform="translate(100,100)" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
    <rect transform="translate(400,400)" width="300" height="400" style="fill:red; stroke-width:1; stroke: yellow" />
</svg>

</body>

И этот код JavaScript:

var positioner = (function(domUtils){

   var svg = document.getElementById("test");
   var elementOffset = 100;

   function getAbsoluteX(leftElement) {
    return domUtils.getWidth(leftElement) + elementOffset; 
   }

   function getAbsoluteY(topElement) {
    return domUtils.getHeight(topElement) + elementOffset;
   }   

   var rectangles = document.querySelectorAll("rect");
   for(var i = 0; i < rectangles.length; ++i) {
    var spaceLeft = 0;
    if(i > 0) {
      spaceLeft = getAbsoluteX(rectangles[i-1]);
    }
    var rect = rectangles[i];
    var attrValue = "translate(" + spaceLeft + ", 100)";
    rect.setAttribute('transform', attrValue);
   };
 })(domUtils);

Где getAbsoluteX() - самоопределяемая функция.

Он работает хорошо в firefox, но не в хроме. Кто-нибудь знает обходное решение или как это решить?

Спасибо. С наилучшими пожеланиями.

Ответ 1

Существует два способа получить/установить значения преобразования для элементов SVG в браузерах Chrome, Firefox, IE или любого пользователя, опасающегося в отношении стандартов:

Обработка преобразований через атрибуты

// Getting
var xforms = myElement.getAttribute('transform');
var parts  = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
var firstX = parts[1],
    firstY = parts[2];

// Setting
myElement.setAttribute('transform','translate(30,100)');

Плюсы. Простота установки и понимания (такая же, как разметка).
Минусы: нужно проанализировать строковое значение, чтобы найти то, что вы хотите; для анимированных значений не может запрашивать базовое значение, когда анимация активна; чувствует себя грязным.

Обработка преобразований с помощью привязок DG SVG

// Getting
var xforms = myElement.transform.baseVal; // An SVGTransformList
var firstXForm = xforms.getItem(0);       // An SVGTransform
if (firstXForm.type == SVGTransform.SVG_TRANSFORM_TRANSLATE){
  var firstX = firstXForm.matrix.e,
      firstY = firstXForm.matrix.f;
}

// Setting
myElement.transform.baseVal.getItem(0).setTranslate(30,100);

Профи: не нужно пытаться самостоятельно разбирать строки; сохраняет существующие списки преобразований (вы можете запрашивать или настраивать только одно преобразование в списке); вы получаете реальные значения, а не строки.
Минусы: может смущать понять сначала; более подробные для установки простых значений; нет удобного метода для извлечения значений поворота, масштабирования или перекоса из SVGTransform.matrix, отсутствия поддержки браузера.

Вы можете найти инструмент, который я написал для изучения DOM, полезного в этом.

Перейдите в http://objjob.phrogz.net/svg/object/131
Нажмите "Показать унаследованные свойства/методы?". Флажок
Посмотрите, что SVGRectElement имеет свойство transform, которое является SVGAnimatedTransformList.
Нажмите SVGAnimatedTransformList, чтобы увидеть свойства и методы, поддерживающие объект.
Исследовать!

Ответ 2

Это довольно старый вопрос, но ответ, если вам интересно, это то, что Chrome не нравится translate(30, 100) - ему нужны единицы. Он также предпочитает -webkit-transform для SVG.