Я пытаюсь связать атрибуты SVG с помощью AngularJS. У меня есть следующий код для маркера изменения размера фигуры:

// S handle.
var s_handle = d3.select(document.createElementNS("http://www.w3.org/2000/svg", "rect"))
    .attr("id", "s-resize")
    .attr("x", "{{(objects['" + id + "'].w - (scope.dragHandle.width / 2))}}")
    .attr("y", "{{(objects['" + id + "'].h - (scope.dragHandle.width / 2))}}")
    .attr(scope.dragHandle)
    .attr("cursor", "s-resize")
    .call(sresize);              

$compile(s_handle.node())(scope);
element.append(s_handle);

Когда я запускаю этот код, я получаю следующую ошибку:

Error: Invalid value for <rect> attribute x="{{(objects['9b320170-6365-4f40-801d-a7a5c6b936f9'].w - (scope.dragHandle.width / 2))}}" d3.min.js:1
Error: Invalid value for <rect> attribute y="{{(objects['9b320170-6365-4f40-801d-a7a5c6b936f9'].h - (scope.dragHandle.width / 2))}}" d3.min.js:1

Я попытался удалить шаг добавления, чтобы изолировать проблему - и похоже, что проблема действительно возникает, когда я устанавливаюx а такжеy атрибуты, даже до этапа угловой сборки.

Обратите внимание, что у меня есть этот метод, работающий с другим объектом SVG, используяtransform атрибут, который изначально принимает строку.

Кто-нибудь сталкивался с этой проблемой раньше? Есть ли какие-то решения? Спасибо.

Edit: пошагово прошел, и похоже, что $ compile` на самом деле не меняет элемент вообще. Может ли это быть потому, что элемент недействителен?