我正在尝试使用 AngularJS 绑定 SVG 属性。我有以下用于调整形状大小手柄的代码:
// 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
and y
属性,甚至在 Angular 编译阶段之前。
请注意,我使用此方法与另一个 SVG 对象一起使用transform
属性,它本身接受一个字符串。
以前有人遇到过这个问题吗?有什么解决办法吗?谢谢。
编辑:单步执行,看起来 $compile` 实际上根本没有改变元素。这可能是因为该元素无效吗?
看起来这与这个问题有关:https://github.com/angular/angular.js/pull/2061
在该问题中也得到了解决。
SVG 元素使用基于 XML 的架构,并且具有命名空间,因此具有验证规则。某些属性不能采用 Angular 插值指令,因为它们需要一个数值,并且浏览器会在 Angular 有机会捕获它之前对其进行验证(即使该元素已创建但尚未附加到 DOM)。
如果有人遇到这个问题,希望这个答案能有所帮助。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)