CODEWITHSUNDEEP
svg
Kenny13
Kenny13

Reputation: 23

SVG Rect Fill Issue

Why isn’t the SVG rectangle fill property not extending the height of the rectangle? I can get it fill with the height property in the SVG tag, but then lose the ability to dynamically scale the rectangle. The browser image is from Firefox. Thanks in advance!

Browser pictured of the fill issue

<!DOCTYPE html>
<html>
<head>
	<title>Test SVG Size</title>
</head>
<body>

  <svg
      version="1.1" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">

        <rect fill="green" x="0" y="0" width="100" height="200"></rect>
        <rect fill="yellow" x="100" y="0" width="100" height="200"></rect>
        <rect fill="red" x="200" y="0" width="100" height="200"></rect>


  </svg>

</body>
</html>

Upvotes: 2

Views: 219

Answers (1)

enxaneta
enxaneta

Reputation: 33024

You need to add a viewBox attribute to your SVG. The total width of the 3 rectangles in your svg is 300 user units and the height is 200. In this case viewBox="0 0 300 200"

  <svg viewBox="0 0 300 200"
      version="1.1" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">

        <rect fill="green" x="0" y="0" width="100" height="200"></rect>
        <rect fill="yellow" x="100" y="0" width="100" height="200"></rect>
        <rect fill="red" x="200" y="0" width="100" height="200"></rect>


  </svg>

Upvotes: 1

Related Questions