我有一个以SVG图像为背景的登录页面。我想将其大小锁定在适当的位置，以便浏览器放大或缩小时都不会改变。看起来糟透了。k
这是Twitter中我正在谈论的功能的svg示例。如果在浏览器中打开此svg代码，则在您命令＆+ /-并缩小时，twitter小鸟的大小不会改变。
<svg class="twitterIcon-bird" viewBox="0 0 1208 982" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 45.2 (43514) - http://www.bohemiancoding.com/sketch -->
<title>bird</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Final-Horizon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-286.000000, -117.000000)" fill-rule="nonzero" fill="#1B95E0">
<path d="M1493.75308,233.195911 C1449.31783,252.922544 1401.56126,266.207828 1351.43951,272.19627 C1402.61804,241.549536 1441.92034,192.987798 1460.3889,135.116296 C1412.53168,163.498493 1359.49119,184.130942 1303.02874,195.252335 C1257.88897,147.093181 1193.42514,117 1122.16771,117 C962.190754,117 844.636121,266.258151 880.768067,421.202806 C674.896491,410.886582 492.324484,312.253414 370.089808,162.341063 C305.17308,273.705962 336.423691,419.391176 446.731805,493.16476 C406.171431,491.856361 367.925917,480.734968 334.561738,462.165765 C331.844294,576.95263 414.122472,684.342008 533.287442,708.245454 C498.413572,717.706186 460.218381,719.9204 421.368991,712.47259 C452.871217,810.904465 544.358512,882.514158 652.854997,884.52708 C548.686294,966.201382 417.443793,1002.68559 286,987.186091 C395.653915,1057.48739 525.940278,1098.50067 665.838342,1098.50067 C1125.89162,1098.50067 1385.81015,709.956437 1370.10936,361.469352 C1418.52012,326.494836 1460.53987,282.864756 1493.75308,233.195911 Z" id="bird"></path>
</g>
</g>
</svg>
这是我想要类似显示的图片的svg信息。您可能需要将其复制并粘贴到文件中，然后在浏览器中查看。这是一个多层的弯曲图像。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="18.4268546%" y1="27.9722359%" x2="82.7977891%" y2="77.3056038%" id="linearGradient-1">
<stop stop-color="#1E87F0" offset="0%"></stop>
<stop stop-color="#1E3E5C" offset="100%"></stop>
</linearGradient>
<linearGradient x1="18.4268546%" y1="28.295015%" x2="82.7977891%" y2="76.9054869%" id="linearGradient-2">
<stop stop-color="#1E87F0" offset="0%"></stop>
<stop stop-color="#1E3E5C" offset="100%"></stop>
</linearGradient>
<path d="M0.882548395,15.7999936 L1.20671504,819.366633 C336.735572,860.919994 594.34158,794.683198 774.024741,620.656245 C932.62388,467.049615 996.276998,527.683301 1151.1184,531.228148 C1305.9598,534.772995 1508.44994,684.094916 1631.51564,783.962916 C1713.55944,850.541583 1650.01507,594.487275 1440.88255,15.7999936 L0.882548395,15.7999936 Z" id="path-3"></path>
<linearGradient x1="10.0537047%" y1="28.3217065%" x2="117.215768%" y2="106.344139%" id="linearGradient-5">
<stop stop-color="#1E87F0" offset="0%"></stop>
<stop stop-color="#1E3E5C" offset="100%"></stop>
</linearGradient>
<path d="M12.04293,25 L6.90201099,735.285212 C159.518234,768.654318 306.462792,773.140482 447.735683,748.743705 C773.312884,692.518943 874.037615,533.915834 1153.33439,533.901355 C1339.53225,533.891702 1497.8173,596.686321 1628.18954,722.285212 L1464.16913,25 L12.04293,25 Z" id="path-6"></path>
</defs>
<g id="Landing-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Landing-page---v2">
<g id="Bitmap" transform="translate(-12.000000, -25.000000)">
<path d="M60.8501735,0.107667822 L60.8501735,687.900102 C293.733255,762.384295 480.221381,787.428003 620.314551,763.031226 C943.172971,706.806464 1004.024,482.419288 1280.98847,482.404809 C1557.95294,482.39033 1520.08109,690.064545 1643.14678,789.932545 C1725.19058,856.511212 1677.75838,593.236253 1500.85017,0.107667822 L60.8501735,0.107667822 Z" id="Mask-Copy" fill="url(#linearGradient-1)" fill-rule="nonzero" opacity="0.12"></path>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="Mask-Copy-2" fill="url(#linearGradient-2)" fill-rule="nonzero" opacity="0.12" xlink:href="#path-3"></use>
<mask id="mask-7" fill="white">
<use xlink:href="#path-6"></use>
</mask>
<use id="Mask" fill="url(#linearGradient-5)" fill-rule="nonzero" xlink:href="#path-6"></use>
</g>
</g>
</g>
</svg>
我可以对svg文件进行哪些更改以使其表现得与twitter svg一样？
答案 0 :(得分：1)
这会给你viewBox，现在我留给你把标记放在那个viewbox中-因为它不在中心。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 5000 5000">
<defs>
<linearGradient x1="18.4268546%" y1="27.9722359%" x2="82.7977891%" y2="77.3056038%" id="linearGradient-1">
<stop stop-color="#1E87F0" offset="0%"></stop>
<stop stop-color="#1E3E5C" offset="100%"></stop>
</linearGradient>
<linearGradient x1="18.4268546%" y1="28.295015%" x2="82.7977891%" y2="76.9054869%" id="linearGradient-2">
<stop stop-color="#1E87F0" offset="0%"></stop>
<stop stop-color="#1E3E5C" offset="100%"></stop>
</linearGradient>
<path d="M0.882548395,15.7999936 L1.20671504,819.366633 C336.735572,860.919994 594.34158,794.683198 774.024741,620.656245 C932.62388,467.049615 996.276998,527.683301 1151.1184,531.228148 C1305.9598,534.772995 1508.44994,684.094916 1631.51564,783.962916 C1713.55944,850.541583 1650.01507,594.487275 1440.88255,15.7999936 L0.882548395,15.7999936 Z" id="path-3"></path>
<linearGradient x1="10.0537047%" y1="28.3217065%" x2="117.215768%" y2="106.344139%" id="linearGradient-5">
<stop stop-color="#1E87F0" offset="0%"></stop>
<stop stop-color="#1E3E5C" offset="100%"></stop>
</linearGradient>
<path d="M12.04293,25 L6.90201099,735.285212 C159.518234,768.654318 306.462792,773.140482 447.735683,748.743705 C773.312884,692.518943 874.037615,533.915834 1153.33439,533.901355 C1339.53225,533.891702 1497.8173,596.686321 1628.18954,722.285212 L1464.16913,25 L12.04293,25 Z" id="path-6"></path>
</defs>
<g id="Landing-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Landing-page---v2">
<g id="Bitmap" transform="translate(-12.000000, -25.000000)">
<path d="M60.8501735,0.107667822 L60.8501735,687.900102 C293.733255,762.384295 480.221381,787.428003 620.314551,763.031226 C943.172971,706.806464 1004.024,482.419288 1280.98847,482.404809 C1557.95294,482.39033 1520.08109,690.064545 1643.14678,789.932545 C1725.19058,856.511212 1677.75838,593.236253 1500.85017,0.107667822 L60.8501735,0.107667822 Z" id="Mask-Copy" fill="url(#linearGradient-1)" fill-rule="nonzero" opacity="0.12"></path>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="Mask-Copy-2" fill="url(#linearGradient-2)" fill-rule="nonzero" opacity="0.12" xlink:href="#path-3"></use>
<mask id="mask-7" fill="white">
<use xlink:href="#path-6"></use>
</mask>
<use id="Mask" fill="url(#linearGradient-5)" fill-rule="nonzero" xlink:href="#path-6"></use>
</g>
</g>
</g>
</svg>