The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Odd SVG behaviour

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #176492

    Hi there,

    I have got some odd behaviour with sizing of SVG elements and I am not sure why it is happening.

    As you can see in the above pen, the logo is clipped however as soon as go into the inspector and disable & re-enable the height property on the a the logo displays as it should.

    (please ignore the duplicate height & width properties, they are fallbacks generated by my SASS)

    Any ideas ?


    please ignore the duplicate height & width properties

    Well… the duplicate height properties are exactly what is causing the clipping. You have two h1 a selectors: the first one specifies a height of 9rem (which seems to work nicely), while the second overrides it with a height of 112px (which is too short to contain the entire image; and, combined with overflow:hidden, causes the clipping).

    Observe (I commented out the height in the second rule).


    I posted this last night and I think I was just really tired.. the reason is because the ratio of the height and width is wrong which causes the clipping.

    Basically height: 7rem; should have been height:8rem;. Sorry for my tiredness :/

    Mods remove this is you want :)

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.