我有一个带有视口的svg,该svg的宽度为100%。
所有路径点都在视口中设置的宽度和高度之内,但它们无法缩放以适合并在底部被切除。
要使路径随视口缩放,还需要做其他事情吗?
<svg id="chart" viewport="0 0 960 900" width="100%">
<path id="meanp2" fill="#00ba41" d="M0,394.651913982198L89,381.74828040247746L178,365.8363447921115L267,346.2147635294238L356,322.01868451830455L445,292.181627470022L534,255.38847710490052L623,210.01751737519893L712,154.06895177627143L801,85.07675916615301L890,0L890,450L801,450L712,450L623,450L534,450L445,450L356,450L267,450L178,450L89,450L0,450Z"></path>
<path id="meanp1" fill="#ffffff" opacity="0.5" d="M0,394.651913982198L89,385.9386669043237L178,375.8537251554601L267,364.18114785230546L356,350.6709993268097L445,335.03399745134334L534,316.93531946923986L623,295.98743269985823L712,271.7417966077222L801,243.67925855870456L890,211.19893761517645L890,450L801,450L712,450L623,450L534,450L445,450L356,450L267,450L178,450L89,450L0,450Z"></path>
<path fill="#00ba41" id="meanm1" d="M0,394.651913982198L89,394.4918599690828L178,394.3313431163474L267,394.1703620855654L356,394.0089155344399L445,393.8470021167925L534,393.684620482552L623,393.52176927774303L712,393.35844714447484L801,393.19465272092987L890,393.0303846413527L890,450L801,450L712,450L623,450L534,450L445,450L356,450L267,450L178,450L89,450L0,450Z"></path>
<path id="meanm2" fill="#ffffff" d="M0,394.651913982198L89,398.867056781845L178,402.7611870569451L267,406.35875215028454L356,409.6823375689777L445,412.7528087762397L534,415.58944218472675L623,418.21004617381925L712,420.63107289059565L801,422.8677215363817L890,424.9340337873086L890,450L801,450L712,450L623,450L534,450L445,450L356,450L267,450L178,450L89,450L0,450Z"></path>
</svg>
答案 0 :(得分:-1)
它是与窗口相关的viewBox而不是视口。