CODEWITHSUNDEEP
svg
pbond
pbond

Reputation: 1927

SVG text cut off in Firefox, independent of CSS/HTML structure

Page passes validator, works in IE9 and Chrome. But I'm clueless why the text get cuts off in Firefox? I've tried playing with the CSS, changing the width and height of the label (didn't do anything), changed the absolute position of the label (still got cut off at the exact same spots), pretty much tried anything HTML/CSS wise.

Screenshot: http://i44.tinypic.com/10qjp5t.png

Upvotes: 1

Views: 2931

Answers (2)

Liran H
Liran H

Reputation: 10579

Add the property "background-size", and give it the width and height values of your SVG image, like this: background-size: (width)px (height)px;

So if your SVG has a width of 100px and a height of 50px, use the following rule in the CSS for your SVG: background-size: 100px 40px;

Furthermore, to add support for older browsers, define a fallback png background in the CSS for your SVG before the SVG background, in the following way (and order): background: url(fallback_image.png) no-repeat; background: url(svg_image.svg) no-repeat;

This works because most browsers that support SVG, support multiple background as well, and thus the latter background (SVG) will be applied. If the browser doesn't support SVG, it will just use the first background (non-SVG).

Source: http://css-tricks.com/using-svg

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 124079

Give the svg element width and height attributes both set to 100%.

Upvotes: 4

Related Questions