Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG IMG has zero dimensions when floated in Firefox [closed]

Tags:

css

firefox

svg

I have a bit of a puzzler concerning an SVG used in an IMG tag in Firefox.

Codepens first:

  1. http://codepen.io/doughamlin/pen/Fgosn
  2. http://codepen.io/doughamlin/pen/zmBda

Codepen 1 uses SVG and does not work in Firefox (version 26). Codepen 2 uses a JPG and works correctly in Firefox. There are not other differences between the two. They both work correctly in Chrome, Safari and IE 10.

The inspector in Firefox shows 0 height and width for the SVG. The SVG displays normally if I remove the float:left from the H1 containing the IMG tag, but I have found no other way to make the SVG display not have I been able to figure out why the image would have 0 dimensions in the first place.

Is this just some obscure Firefox bug, or am I actually doing something wrong?

like image 957
Doug Hamlin Avatar asked Feb 12 '14 20:02

Doug Hamlin


1 Answers

This article will help you with why it does not work

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag

There are some important things to take note of (referenced from the W3 specs):

If you do not set the x or y attributes, they will be set to 0.

If you do not set the height or width attributes, they will be set to 0. Having a height or width attribute of 0 will disable rendering of the image.

like image 54
Huangism Avatar answered Oct 12 '22 10:10

Huangism