CODEWITHSUNDEEP
javascripthtmlsvg
user2975771
user2975771

Reputation: 31

Width height of the svg is not changing

When i try to change the height and width of the of svg tag it changed but the map inside grts cut .

this is the sample of the svg file

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500pt" height="500pt" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(528,270)" > 
        <g id="states" fill="green" width="500pt" height="500pt" >
            <a id="s01">
                <path d="M158.95067408594068,46.88327098850149L185.03303599629845,44.0148159910488L189.74121811302572,59.50889743727097L196.59587401503094,82.27898337817625L199.0518321008348,87.17077847298319L201.13017099189912,89.85649424407167L200.707578706067,91.7588142001174L202.6261541288344,92.6205139503571L200.33524838576966,95.29216920133321L200.7363444144292,97.59217497211156L199.80999341478454,100.8918397716738L202.09021078470892,106.20782432993735L201.64399529140977,111.17790897235179L204.03767592952832,115.96122130827978L196.3574723373462,117.09985438789514L163.47293491613115,121.08122011183377L163.22294648718562,123.55296427740802L167.13791879442175,126.6835133291724L166.871741037497,129.76735843938286L168.2485001228969,131.1400084527912L166.21795234496457,134.1137855808483L164.12121282499038,134.9547500732084L159.81791064191435,132.36796011584426L158.90469329765804,127.88713803963412L157.64560372254968,127.51168600895127L156.5390262005875,131.08669596034315L156.36678872306632,134.46030822963786L152.20800610122825,133.97284127048096L148.16895577705603,105.98121856614907L148.12136132417422,70.56398790998259L148.15893441899317,50.102043132249676L146.40831263672231,48.33943105796875Z" stroke="#FFFFFF" stroke-dasharray="1, 0" stroke-width="1.5"></path>
                <text x="162.66165594858754" y="86.92631614090374" style="">AL</text>
                <title></title>
            </a>
            <a id="s02">

Upvotes: 3

Views: 5254

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

After playing with your sample, I think I have a idea of what might be happening.

What did you do to your file to try and resize it? Did you alter the width and height, or did you change the viewBox value? Or both?

In the snippet you posted, the outline of Alabama is off the right hand edge of the picture. That is because of the transform in the first group:

transform="translate(528,270)"

which is moving the Alabama origin to 528,270, which is off the edge of the diagram as defined by the viewBox (500x500).

So changing the width and height, won't bring Alabama back onto the page. You have to alter the viewBox so that it encompasses the part of the page where Alabama is. So, for example, if you change it to:

viewBox="0 0 1000 500"

Alabama will now be visible, and you can then change the size of the map to whatever you want.

Demo here

In summary, viewBox (x y width height) describes the bounds of the content of the page. width and height tell the renderer how big to scale the area described by the viewBox. So in this case, all the content in that 1000x500 viewbox will be scaled so that it fits in the box defined by the width and height (500x500). So, in actual fact, the map will be scaled down for these values (1000x500 down to 500x250).

Upvotes: 1

Related Questions