CODEWITHSUNDEEP
javascripthtmlcsssvg
infodev
infodev

Reputation: 5245

Fix responsive svg height

I would like to make my curved svg draw have a fix maximum height , that mean when I resize the window to maximum it does not grow more than the half of page for example.

Actually when I resize the page height keep growing.

const App = () => {
  return (
    <div className="App">
      <svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1280 657">
        <defs>
          <linearGradient id="linear-gradient" x1="0.5" y1="0.519" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
            <stop offset="0" stop-color="#589ffe" />
            <stop offset="1" stop-color="#045dd0" />
          </linearGradient>
        </defs>
        <path id="Intersection_1" data-name="Intersection 1" d="M924.458,1202.608c-224.9-3.619-428.938-49.357-587.684-100v-556h1279v513.5c-215.071,100.41-432.159,139.232-634.553,142.5Z" transform="translate(-336.274 -546.108)" stroke="#707070" stroke-width="1" fill="url(#linear-gradient)" />
      </svg>

    </div >
  );
}

ReactDOM.render(<App />, document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Upvotes: 0

Views: 46

Answers (1)

Beverley1
Beverley1

Reputation: 36

I would save the svg file in a seperate container and link as follows:

<div div src="images/image.svg" id="svg"> </div>

Then apply css styling as follows

#svg{

max-height:10vw

}

Upvotes: 1

Related Questions