如何在JavaScript中使用chrome处理SVG元素上的translate变换？ [英] How to manipulate translate transforms on a SVG element with javascript in chrome?
问题描述
我想用JavaScript处理SVG元素的 transform =translate（x，y）属性。
所以我得到了这个HTML代码：
< body>
< svg id =testpreserveAspectRatio =xMidYMid meetviewBox =0 0 100％100％xmlns =http://www.w3.org/2000/svg版本= 1.1 >
< rect transform =translate（100,100）width =300height =100style =fill：rgb（0,0,255）; stroke-width：1; stroke：rgb（0,0 ，0）/>
< rect transform =translate（400,400）width =300height =400style =fill：red; stroke-width：1; stroke：yellow/>
< / svg>
< / body>
此JavaScript代码：
var positioner =（function（domUtils）{
var svg = document.getElementById（test）;
var elementOffset = 100;
函数getAbsoluteX（leftElement）{
返回domUtils.getWidth（leftElement）+ elementOffset;
}
函数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中不起作用。任何人都知道解决方法或如何解决这个问题？
谢谢。
问候。
有两种方法可以在Chrome，Firefox，IE中为SVG元素获取/设置变换值，或任何标准恐惧的SVG用户代理：
通过属性处理转换
//获取
var xforms = myElement.getAttribute（'transform'）;
var parts = / translate\（\s *（[^ \s，）] +）[，]（[^ \s，）] +）/ .exec（xforms）;
var firstX = parts [1]，
firstY = parts [2];
//设置
myElement.setAttribute（'transform'，'translate（30,100）'）;
优点：易于设置和理解（与标记）。
缺点：必须解析字符串值才能找到您想要的内容;对于动画值，当动画处于活动状态时，不能要求基本值;感觉很脏。
通过SVG DOM绑定处理转换
//获取
var xforms = myElement.transform.baseVal; //一个SVGTransformList
var firstXForm = xforms.getItem（0）; //一个SVGTransform
if（firstXForm.type == SVGTransform.SVG_TRANSFORM_TRANSLATE）{
var firstX = firstXForm.matrix.e，
firstY = firstXForm.matrix.f;
}
//设置
myElement.transform.baseVal.getItem（0）.setTranslate（30,100）;
优点：无需尝试解析字符串拥有;保留现有的变换列表（您可以查询或调整列表中的单个变换）;你会得到真正的价值，而不是字符串。
缺点：起初可能会让人困惑，更详细的设置简单值;从 SVGTransform.matrix 缺少浏览器支持。 您可能会发现一个我为探索DOM而编写的工具
- 转到 http://objjob.phrogz.net/svg/object/131
- 点击显示继承的属性/方法？ checkbox
- 请参阅SVGRectElement具有
transform属性，该属性是SVGAnimatedTransformList。 点击SVGAnimatedTransformList以查看对象支持的属性和方法。 - 探索！
I want to manipulate the transform="translate(x,y)" attribute of a SVG element using JavaScript.
So I got this HTML code:
<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>
And this JavaScript code:
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);
Where getAbsoluteX() is a self-defined function.
It's working nice in firefox but not in chrome. Anyone knows a workaround or how to solve this?
Thanks. Regards.
There are two ways to get/set transform values for SVG elements in Chrome, Firefox, IE, or any standards-fearing SVG user agent:
Handling Transforms via Attributes
// 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)');
Pros: Simple to set and understand (same as the markup).
Cons: Have to parse the string value to find what you want; for animated values, can't ask for the base value when the animation is active; feels dirty.
Handling Transforms via SVG DOM Bindings
// 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);
Pros: No need to try to parse strings on your own; preserves existing transform lists (you can query or tweak just a single transformation in the list); you get real values, not strings.
Cons: Can be confusing to understand at first; more verbose for setting simple values; no convenient method for extracting rotation, scale, or skew values from the SVGTransform.matrix, lack of browser support.
You may find a tool I wrote for exploring the DOM helpful in this.
- Go to http://objjob.phrogz.net/svg/object/131
- Click the "Show inherited properties/methods?" checkbox
- See that the SVGRectElement has a
transformproperty that is anSVGAnimatedTransformList. - Click on
SVGAnimatedTransformListto see the properties and methods that object supports. - Explore!
这篇关于如何在JavaScript中使用chrome处理SVG元素上的translate变换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
