如何在 chrome 中使用 javascript 在 SVG 元素上操作翻译转换？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10349811/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to manipulate translate transforms on a SVG element with javascript in chrome?
提问by Phrogz
I want to manipulate the transform="translate(x,y)"attribute of a SVG element using JavaScript.
我想transform="translate(x,y)"使用 JavaScript操作SVG 元素的属性。
So I got this HTML code:
所以我得到了这个 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>
And this JavaScript code:
这个 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);
Where getAbsoluteX()is a self-defined function.
哪里getAbsoluteX()是自定义函数。
It's working nice in firefox but not in chrome. Anyone knows a workaround or how to solve this?
它在 Firefox 中运行良好，但在 chrome 中不运行。任何人都知道解决方法或如何解决这个问题？
Thanks. Regards.
谢谢。问候。
回答by Phrogz
There are two ways to get/set transform values for SVG elements in Chrome, Firefox, IE, or any standards-fearing SVG user agent:
有两种方法可以在 Chrome、Firefox、IE 或任何担心标准的 SVG 用户代理中获取/设置 SVG 元素的转换值：
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
通过 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);
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.
优点：无需尝试自己解析字符串；保留现有的转换列表（您可以查询或调整列表中的单个转换）；你得到的是真正的值，而不是字符串。
缺点：一开始可能会让人难以理解；更详细地设置简单值；没有方便的方法从SVGTransform.matrix、缺乏浏览器支持中提取旋转、缩放或倾斜值。
You may find a tool I wrote for exploring the DOM helpful in this.
您可能会发现我编写的用于探索 DOM 的工具对此很有帮助。
- 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!
- 转到http://objjob.phrogz.net/svg/object/131
- 单击“显示继承的属性/方法？” 复选框
- 看到 SVGRectElement 有一个
transform属性是SVGAnimatedTransformList. - 单击
SVGAnimatedTransformList以查看对象支持的属性和方法。 - 探索！
回答by borbulon
This is a pretty old question, but the answer, in case you were wondering, is that Chrome doesn't like translate(30, 100)- it needs units. It also prefers -webkit-transformfor SVG.
这是一个很老的问题，但如果您想知道，答案是 Chrome 不喜欢translate(30, 100)——它需要单位。它也更喜欢-webkit-transformSVG。
