как масштабировать рисунок в соответствии с окном просмотра или высотой ширины тега SVG

Question

как масштабировать рисунок в соответствии с окном просмотра или высотой ширины тега SVG

0

Привет, я столкнулся с проблемой. У меня есть svg.Когда я пытаюсь изменить высоту, ширину и высоту и ширину окна, рисунок внутри svg не будет вписываться в поле

Это мой mysvg, я даю короткую форму

<?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>
        </g>
    </g>
</svg>

это то, что происходит, когда я изменяю ширину и высоту или viewbox или оба \

теперь ширина ширины уменьшается, но рисунок остается тем же

Sunil Kumar 11 нояб. 2013, в 16:20

Источник

Теги:

javascript

jquery

css

html5

svg

2 ответа

1

Решение такое же, как и ответ, который я дал вам вчера.

Высота ширины svg не меняется

Попробуйте выполнить следующие действия:

(1) Установите ширину и высоту svg на 500 и добавьте в ваш svg preserveAspectRatio="none".

<svg width="500" height="500" preserveAspectRatio="none"...>

Это, вероятно, будет растягивать вашу карту странно, но не волнуйтесь, это просто временное изменение, которое делает следующий шаг проще.

(2) Теперь отредактируйте viewBox, пока не будет видна вся карта. После того, как вы найдете правильные значения, оставьте viewBox в покое. Вам не нужно менять его дальше.

(3) Удалите preserveAspectRatio="none". Эффект растяжения исчезнет.

(4) Теперь вы можете настроить ширину и высоту svg от 500x500 до любого размера, который вам нравится. Вся карта должна оставаться видимой независимо от того, как вы изменяете ширину и высоту.

Paul LeBeau 12 нояб. 2013, в 02:18

Ещё вопросы

Okan Guner · Accepted Answer · 2013-11-11T20-06-00.000Z

Предположим, что начальная высота и ширина 1000 пикселей.

<svg height="1000" width="1000" viewBox="0 0 1000 1000">

Если вы хотите изменить размер svg и всех элементов в нем, не изменяйте значение viewBox. Для 500px SVG:

<svg height="500" width="500" viewBox="0 0 1000 1000">

пример

Как масштабировать и панорамировать с помощью SVG