我想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 …