- This topic is empty.
June 20, 2014 at 2:58 am #173239
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:
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?June 20, 2014 at 3:00 am #173240
You might want to change your username in your profile setting rather than have your email address out in the wild.June 20, 2014 at 3:06 am #173241
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.June 20, 2014 at 3:38 am #173257
Thanks for the profile tip, have changed that.
Here is a link to the codepen, with code this time.
Not sure what the JS problems are, I just cut and paste Modernizr script in to the JS bit and that’s it.June 20, 2014 at 3:44 am #173258
You don’t need Modernizer in Codepen.
I’m just trying to Figure out what the Pen is supposed to do.
Or is it actually supposed to do anything?June 20, 2014 at 3:47 am #173260
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.June 20, 2014 at 3:49 am #173262
Why don’t you need Modernizr? Is it built in?June 20, 2014 at 3:59 am #173266
Ahh…I get you
Could be the
i confess I’m still getting to grips with SVG but my understanding is the the
viewboxdefines 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.June 24, 2014 at 2:29 am #173524
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.
- The forum ‘CSS’ is closed to new topics and replies.