使用objectBoundingBox

时间:2017-08-14 17:23:18

标签: javascript svg rotatetransform wheelnav.js

我需要围绕它的中心旋转用作svg元素(wheelnav.js菜单的一部分)的背景的模式。我知道我可以使用patternTransform = rotate(angle, centerX, centerY),但该模式使用objectBoundingBox作为patternUnits,我不知道如何获取元素的宽度和高度。

有没有办法获得它的尺寸?或者在不知道宽度和高度的情况下围绕中心旋转?

修改

以下是我使用的代码:

var bounRect = document.getElementById("wheelnav-piemenu" + 3 + "-slice-" + 0).getBoundingClientRect()
var patt = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
patt.setAttribute('id', 'img' + itemId);
patt.setAttribute('patternUnits', 'objectBoundingBox');
patt.setAttribute('width', '1');
patt.setAttribute('height', '1');
patt.setAttribute('x', '0');
patt.setAttribute('y', '0');
patt.setAttribute('patternTransform',"rotate(" + itemId*-36 + ", 0.5, 0.5)")

var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'assets/images/Logo-cropper.png');
image.setAttribute('width', bounRect.width*1.12);
image.setAttribute('height', bounRect.height*1.12);
image.setAttribute('x', -bounRect.height*0.06);
image.setAttribute('y', -bounRect.height*0.04);

var defs = document.getElementsByTagName('defs')[0];
patt.appendChild(image);
defs.appendChild(patt);

然而,它不会围绕其中心旋转。

0 个答案:

没有答案