CODEWITHSUNDEEP
htmlcsssvg
Jimmy
Jimmy

Reputation: 12487

SVG appearing outside of viewport

I've tried to make the SVG viewport take up 100% of the width and height of the page here:

http://jsfiddle.net/XZ57u/2/

However it seems to appear only when I change this:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" id="city">

To this (viewport size):

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1400 1400" enable-background="new 0 0 1400 1400" xml:space="preserve" id="city">

My understanding was that the 100 meant it was taking up the whole viewport percentage so why then does it appear off the page?

Upvotes: 0

Views: 2980

Answers (3)

Paulie_D
Paulie_D

Reputation: 115046

viewBox="0 0 100 100"

Simply put viewbox defines the coordinate-system limits of your SVG...it has nothing (really) to do with the dimensions of the element in the HTML which you can either set in the SVG itself or in your CSS.

By changing the viewbox you are effectively saying, I only want to see the top left 100x100 section of my 1400x1400 SVg.

EDIT: JSfiddle demo

with original 1400 viewbox and any CSS dimensions.

Upvotes: 2

Kheema Pandey
Kheema Pandey

Reputation: 10265

you have to define the viewBox attribute as well. In addition you could also use Preserving Aspect Ratio as well.

svg {
    width:100%;
    height:100%;
}

<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid none">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Upvotes: 1

sailens
sailens

Reputation: 1614

The viewbox numbers stand for pixels, not for percentatge. If you want to cover the whole container you have to set the SVG elements width and height to 100%

use this instead:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="100%" y="100%" xml:space="preserve" id="city">

here is the fiddle: http://jsfiddle.net/t5rhp/

Upvotes: 1

Related Questions