Centering SVG clipping path with CSS -


i'm blown if can find solution this! want center svg clip in surrounding div, per example:

http://jsfiddle.net/ztfdv9qh/ - please see link svg long!

<div class="svg-wrapper">     <div class="svg-clipped"></div> </div> 

alright, i've spent way more time playing wanted and, unfortunately, still feel need preface "answer" message: hope else has better answer you.

with said, find possible choices:

  1. use transform: translate(x,y) force clippath center. isn't want since require fixed width space.

  2. set clippathunits="objectboundingbox" on <clippath>. changes coordinate system relative bounding box of element clipping path applies to. gets same width , height of bounding box. sounded great until found big "but": coordinates points used in <path> need written values within range of [0,1]. means need rewrite <path> element. here reference better explanation of option.

good luck!


Comments

Popular posts from this blog

javascript - Bootstrap Popover: iOS Safari strange behaviour -

Magento/PHP - Get phones on all members in a customer group -

session - Logging Out Using PHP -