我想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 中却不行。任何人都知道解决方法或如何解决这个问题?
谢谢。问候。