Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

getBBox() doesn't work on <use> elements. #342

Open
shshaw opened this issue Jan 13, 2015 · 1 comment
Open

getBBox() doesn't work on <use> elements. #342

shshaw opened this issue Jan 13, 2015 · 1 comment

Comments

@shshaw
Copy link

shshaw commented Jan 13, 2015

Snap.svg's getBBox() refuses to work on use elements. However, if you call getBBox() on the element's node, it does work, at least in Chrome. Firefox does get the correct values if you try background.node.getBBox() in the Console after loading.

See the example here: http://codepen.io/shshaw/pen/JoWGBB

<svg class="mySvg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 370 185">
  <defs>
    <circle id="circle" cx="50%" cy="100%" r="63%" />
  </defs>
  <use class="background" xlink:href="#circle" />
</svg>
var mySvg = new Snap('.mySvg');
var background = mySvg.select('.background'); // The use reference

var firstResults = background.getBBox(); // Empty values
var secondResults = background.node.getBBox(); // The expected values
@ambervdberg
Copy link

I see this is an old thread, but I ran into this problem as well and found a solution.

You can temporarily add a group around the use element and get the bbox of that.
This will return the correct values.

You can add a method to handle this to Snap.
For example:

Snap.plugin(function (Snap, Element, Paper, glob) {
            Element.prototype.getBBoxUse = function () {
                var bbox = this.getBBox();
                if (bbox.cx === 0 && this.type === 'use') {
                    var g = Snap.parse('<g></g>').select('g');
                    g.insertBefore(this);
                    g.add(this);
                    bbox = g.getBBox();
                    this.insertBefore(g);
                    g.remove();
                }
                return bbox;
            };
 });

Now you can call background.getBBoxUse() to get the correct values.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants