CODEWITHSUNDEEP
htmlcsssvgcross-browser
Kieranmv95
Kieranmv95

Reputation: 828

SVG CSS | SVG only works in chrome

Having issues with an SVG I have made.

It works great in chrome and does exactly what i want and expect it too but I cannot get it working in any other browser (tried IE and Firefox so far).

My SVG is an image with a clip path cutting it out into the shape I want and this works on different resolutions spanning the full page width. Below is how it looks in chrome including an image of when the page width expands

Image on small screen Image on larger screen

The html for the SVG looks as follows

    <svg id="mobile-svg" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 875.67 321.8" preserveAspectRatio="none">
        <defs>
            <style>.cls-1{fill:#60b6e1;}</style>
        </defs>
        <clipPath id="myClip">
            <path d="M0,0S1,7.68,12.63,18.54,364.25,297.4,364.25,297.4s30.77,27.3,84.06.38,379.59-192,379.59-192S873.34,87.5,875.67,0H0Z" transform="translate(0)"></path>
         </clipPath>
         <image class="cls-image"  xlink:href="http://localhost:63342/Carfinance247Rebrand/Content/img/carDrivingImage.png" clip-path="url(#myClip)"/>
    </svg>

The CSS for the SVG (.SCSS)

  #mobile-svg {
      margin-bottom: -3px;
      background-color: #5fb6e0;
      .cls-image {
          width: 100%;
          height: 115%;
      }
  }

All works in chrome as expected but see image below for Firefox, the same thing also happens in IE (version 9 - 11)

Firefox image

I have tried changing position types and display types, also setting set width and ehights but cant get it to appear in other browsers.

I ahve an SVG that uses clip paths at a different point in the page and this one works fine, hence the confusion for this one. See image below of my working SVG

workign example

inb4 I am relatively new to SVG's

Upvotes: 0

Views: 810

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

  • In SVG 1.1 an <image> element must have height and width attributes i.e. you can't set the height and width via CSS.

  • In SVG 2 it is proposed that image elements have width and height that are CSS properties.

Only Chrome has so far implemented this part of the SVG 2 specification.

Upvotes: 1

Related Questions