[Solved] SVG problem in Firefox

[John A]

I’m making my first foray into SVG and have been through Chris’s blog post on the topic and have produced this lightbox with zoom controls as SVG graphics:

SVG zoom controls in a lightbox

Looks fine in Chrome and IE but in FF the ‘left’ and ‘right’ controls blow out of their <a> parent container and I’m not sure why. Is this something to do with the “viewbox” attribute of the SVG element?

[Paulie_D]

You might want to change your username in your profile setting rather than have your email address out in the wild.

[Paulie_D]

Codepen is telling me there are some JS errors but I don’t know enough Js/JQ to confirm that….either way there doesn’t seem to be a lot of functionality in the Codepen.

[John A]

Thanks for the profile tip, have changed that.

Here is a link to the codepen, with code this time.

Try this

Not sure what the JS problems are, I just cut and paste Modernizr script in to the JS bit and that’s it.

[Paulie_D]

You don’t need Modernizer in Codepen.

http://codepen.io/Paulie-D/pen/BxhIw

I’m just trying to Figure out what the Pen is supposed to do.

Or is it actually supposed to do anything?

[John A]

It doesn’t do anything at the moment. I’m just using SVG for the zoom control buttons and want to know why they are blowing out in Firefox.

[John A]

Why don’t you need Modernizr? Is it built in?

[Paulie_D]

Ahh…I get you

Could be the viewbox

i confess I’m still getting to grips with SVG but my understanding is the the viewbox defines the coordinate system for the SVG.

So `viewbox=”0 0 100 100″ means that anything within the coordinates 0 – 100 (x & y) will not be visible (or something like that)

So..the ‘right’ link.

<svg xmlns="http://www.w3.org/2000/svg"
           viewBox="140.682 181.438 346.472 479.015">
        <polygon points="487.2,420.9 140.7,660.5 140.7,181.4"/>
</svg>

On a quite glance-over, it looks like you have some points that would not fit inside the viewbox boundaries.

487.2 is higher than any number in the viewbox given. whether that’s a major factor or not is a little bit beyond my current level of understanding. Perhaps FF has an issue with that?

However, I would say that you’re probably duplicating/generating a lot of unnecessary code.

All your button/links are the same except rotated. An ideal opportunity to use a <def> and re-use the same basic definition with individual transforms.

[John A]

I actually created the icons in Illustrator and tweaked and pasted the XML that it created. It seems to be very bloated.

Anyway, I’ve read this tutorial which takes you step by step what element in the SVG spec does and re-drew the arrows by hand it works fine now.

http://tutorials.jenkov.com/svg/polyline-element.html

[Author]

Posts