javascript - Rotate svg pattern around it's center when using objectBoundingBox -
i need rotate pattern used background svg element (part of wheelnav.js menu) around it's center. know can use patterntransform = rotate(angle, centerx, centery)
, pattern uses objectboundingbox
patternunits
, don't know how width , height of element.
is there way dimensions? or rotate around center without knowing width , height?
edit:
here code use:
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);
however doesn't rotate around center.
Comments
Post a Comment