html - 缩放 SVG 以显示其自身

Question

我在这里有一个 SVG，我试图完全展示它，如您所见，它在顶部被切割。我试过调整 SVG 的高度和宽度，但没有成功。

<svg width="1200" height="500" viewBox="0 0 10 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-693.966 132.361C-716.67 15.8345 -692.688 -100.024 -593.05 -159.076C-488.421 -221.102 -347.029 -75.6873 -242.4 -137.653C-134.362 -201.621 35.576 -268.927 178.186 -115.804C250.312 -38.3017 279.771 97.5851 296.266 199.546C309.839 283.299 305.457 383.742 252.503 456.086C174.777 562.355 67.8352 541.053 -35.6982 489.041C-105.329 454.083 -170.152 450.381 -246.904 461.548C-307.588 470.348 -369.915 482.365 -429.564 468.163C-554.583 438.425 -664.264 284.756 -693.966 132.361Z" fill="#3620BD"/>
</svg>

原来的属性是svg width="303" height="532" viewBox="0 0 303 532"

标签： htmlcsssvgfigma

Answer 1

调整viewBox的第二个参数。

<svg width="1200" height="500" viewBox="0 -300 10 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-693.966 132.361C-716.67 15.8345 -692.688 -100.024 -593.05 -159.076C-488.421 -221.102 -347.029 -75.6873 -242.4 -137.653C-134.362 -201.621 35.576 -268.927 178.186 -115.804C250.312 -38.3017 279.771 97.5851 296.266 199.546C309.839 283.299 305.457 383.742 252.503 456.086C174.777 562.355 67.8352 541.053 -35.6982 489.041C-105.329 454.083 -170.152 450.381 -246.904 461.548C-307.588 470.348 -369.915 482.365 -429.564 468.163C-554.583 438.425 -664.264 284.756 -693.966 132.361Z" fill="#3620BD"/>
</svg>