CODEWITHSUNDEEP
htmlcssgoogle-chromesvg
Stephen
Stephen

Reputation: 1183

SVG not scaling in Chrome

I am trying to create a div with a curved edges at the top and bottom. I created a curved border in Inkscape and imported the SVG code in HTML. The problem I am facing is that SVG works perfectly in Firefox, but in Chrome the SVG won't scale with the window size. It stays at a certain width and doesn't scale.

Here is a codepen project with the HTML and CSS: https://codepen.io/stephenhenckaerts/pen/MWawBWG

<html>
  <body>
     <div class="about">
      <svg
        xmlns:dc="http://purl.org/dc/elements/1.1/"
        xmlns:cc="http://creativecommons.org/ns#"
        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns="http://www.w3.org/2000/svg"
        class="curve upper-curve"
        version="1.1"
        viewBox="0 0 210 34.533334"
      >
        <defs id="defs2" />
        <metadata id="metadata5">
          <rdf:RDF>
            <cc:Work rdf:about="">
              <dc:format>image/svg+xml</dc:format>
              <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
              <dc:title></dc:title>
            </cc:Work>
          </rdf:RDF>
        </metadata>
        <g transform="translate(0,-262.46666)" id="layer1">
          <path
            class="curve-path"
            d="m -2.078869,262.60416 c 0,0 6.9925594,15.49702 109.046129,19.27678 102.05357,3.77977 102.99852,11.1503 106.02232,11.90625 3.02381,0.75596 0.37798,11.52828 0.37798,11.52828 l -214.5014885,0.56696 z"
            style="
              fill-opacity: 1;
              stroke-width: 0.26458332px;
              stroke-linecap: butt;
              stroke-linejoin: miter;
              stroke-opacity: 0;
            "
          />
        </g>
      </svg>
      <div class="content"></div>
      <svg
        xmlns:dc="http://purl.org/dc/elements/1.1/"
        xmlns:cc="http://creativecommons.org/ns#"
        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns="http://www.w3.org/2000/svg"
        class="curve"
        version="1.1"
        viewBox="0 0 210 34.533334"
      >
        <defs id="defs2" />
        <metadata id="metadata5">
          <rdf:RDF>
            <cc:Work rdf:about="">
              <dc:format>image/svg+xml</dc:format>
              <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
              <dc:title></dc:title>
            </cc:Work>
          </rdf:RDF>
        </metadata>
        <g transform="translate(0,-262.46666)" id="layer1">
          <path
            class="curve-path"
            d="m 213.68306,298.88987 c 0,0 -6.99255,-15.49702 -109.04612,-19.27678 C 2.583366,275.83332 1.638416,268.46279 -1.385384,267.70684 c -3.02381,-0.75596 -0.37798,-11.52828 -0.37798,-11.52828 L 212.73812,255.6116 Z"
            style="
              fill-opacity: 1;
              stroke-width: 0.26458332px;
              stroke-linecap: butt;
              stroke-linejoin: miter;
              stroke-opacity: 0;
            "
          />
        </g>
      </svg>
    </div>
  </body>
</html>

This is the CSS: 

.curve {
  width: 100%;
  height: fit-content;
  fill: #0b3c49;
}

.curve-path {
  margin: 0;
  width: 100%;
  height: 100%;
}

.upper-curve {
  position: relative;
  top: 0.3rem;
}

.content {
  height: 500px;
  background-color: #0b3c49;
}

Upvotes: 0

Views: 159

Answers (1)

Kaiido
Kaiido

Reputation: 136608

That's because Firefox doesn't support height: fit-content;. Just remove it and you'll get the same result in both browsers.

.curve {
  width: 100%;
/*  height: fit-content; */
  fill: #0b3c49;
}

.curve-path {
  margin: 0;
  width: 100%;
  height: 100%;
}

.upper-curve {
  position: relative;
  top: 0.3rem;
}

.content {
  height: 500px;
  background-color: #0b3c49;
}
 <div class="about">
  <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    class="curve upper-curve"
    version="1.1"
    viewBox="0 0 210 34.533334"
  >
    <defs id="defs2" />
    <metadata id="metadata5">
      <rdf:RDF>
        <cc:Work rdf:about="">
          <dc:format>image/svg+xml</dc:format>
          <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
          <dc:title></dc:title>
        </cc:Work>
      </rdf:RDF>
    </metadata>
    <g transform="translate(0,-262.46666)" id="layer1">
      <path
        class="curve-path"
        d="m -2.078869,262.60416 c 0,0 6.9925594,15.49702 109.046129,19.27678 102.05357,3.77977 102.99852,11.1503 106.02232,11.90625 3.02381,0.75596 0.37798,11.52828 0.37798,11.52828 l -214.5014885,0.56696 z"
        style="
          fill-opacity: 1;
          stroke-width: 0.26458332px;
          stroke-linecap: butt;
          stroke-linejoin: miter;
          stroke-opacity: 0;
        "
      />
    </g>
  </svg>
  <div class="content"></div>
  <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    class="curve"
    version="1.1"
    viewBox="0 0 210 34.533334"
  >
    <defs id="defs2" />
    <metadata id="metadata5">
      <rdf:RDF>
        <cc:Work rdf:about="">
          <dc:format>image/svg+xml</dc:format>
          <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
          <dc:title></dc:title>
        </cc:Work>
      </rdf:RDF>
    </metadata>
    <g transform="translate(0,-262.46666)" id="layer1">
      <path
        class="curve-path"
        d="m 213.68306,298.88987 c 0,0 -6.99255,-15.49702 -109.04612,-19.27678 C 2.583366,275.83332 1.638416,268.46279 -1.385384,267.70684 c -3.02381,-0.75596 -0.37798,-11.52828 -0.37798,-11.52828 L 212.73812,255.6116 Z"
        style="
          fill-opacity: 1;
          stroke-width: 0.26458332px;
          stroke-linecap: butt;
          stroke-linejoin: miter;
          stroke-opacity: 0;
        "
      />
    </g>
  </svg>
</div>

Upvotes: 1

Related Questions