38

我想transform="translate(x,y)"使用 JavaScript 操作 SVG 元素的属性。

所以我得到了这个 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 中运行良好,但在 chrome 中却不行。任何人都知道解决方法或如何解决这个问题?

谢谢。问候。

4

2 回答 2

102

在 Chrome、Firefox、IE 或任何标准的 SVG 用户代理中,有两种方法可以获取/设置 SVG 元素的转换值:

通过属性处理转换

// 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)');

优点:易于设置和理解(与标记相同)。
缺点:必须解析字符串值才能找到你想要的;对于动画值,动画激活时不能要求基值;感觉很脏。

通过 SVG DOM 绑定处理转换

// 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 的工具对此很有帮助。

  1. 转到http://objjob.phrogz.net/svg/object/131
  2. 单击“显示继承的属性/方法?” 复选框
  3. 看到 SVGRectElement 有一个transform属性是SVGAnimatedTransformList.
  4. 点击SVGAnimatedTransformList查看对象支持的属性和方法
  5. 探索!
于 2012-04-27T21:44:53.327 回答
-9

这是一个相当古老的问题,但如果您想知道,答案是 Chrome 不喜欢translate(30, 100)- 它需要单位。它也更喜欢-webkit-transformSVG。

于 2013-11-07T17:40:45.613 回答