Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
31 lines (26 sloc) 825 Bytes
title slug category tags
SVG clientWidth in Firefox
svg-clientwidth-in-firefox
web
web, firefox, svg

Be careful when playing with clientWidth and masking SVG elements.

Each element "hidden" in <defs> will have a zero clientWidth, clientTop etc. in Firefox.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  width="100%" height="100%" xlink="http://www.w3.org/1999/xlink">
  <ellipse
    id="IdoHaveClientWidth"
    rx="10%" ry="20%" cx="50%" cy="55%">
  </ellipse>
  <defs>
    <mask>
      <ellipse
        id="IhaveNoClientWidth"
        rx="10%" ry="20%" cx="50%" cy="55%">
      </ellipse>
    </mask>
  </defs>
</svg>

To get the real dimensions, you'll have to clone the element and insert it as a direct child of the SVG tag. This applies to the current Firefox version - 22.0.