31 javascript svg google-chrome transform
我想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中却不行.任何人都知道解决方法或如何解决这个问题？
谢谢.问候.
Phr*_*ogz 88
在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)');
优点:设置和理解简单(与标记相同).
缺点:必须解析字符串值以找到您想要的内容; 对于动画值,动画处于活动状态时无法请求基值; 感觉很脏.
// 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而编写的工具.
transform属性SVGAnimatedTransformList.SVGAnimatedTransformList以查看对象支持的属性和方法.| 归档时间： |
|
| 查看次数： |
47717 次 |
| 最近记录： |