如何使页脚不占用页面的一半?

Question

所以我有这个svg作为页脚，当我检查开发人员工具时，它显示它占用了一半的页面。我希望svg只包含在预期的空间中，而不占用页面中的额外空间，因为其他元素无法定位，由于这个问题。

<footer className='absolute bottom-0 w-full'>
<svg
className='fill-green'
viewBox='0 0 500 150'
preserveAspectRatio='none'
xmlns='http://www.w3.org/2000/svg'
>
<defs>
<filter id='shadow'>
<feDropShadow
dx='0'
dy='0'
stdDeviation='2'
flood-color='#159F68'
/>
</filter>
<path
id='footer-shadow'
className='stroke-none'
d='M29.86,179.11 C100.86,200.36 200.94,60.48 450.84,180.09 L363.96,855.44 L0.00,190.00 Z'
></path>
</defs>
<g>
<use href='#footer-shadow' filter='url(#shadow)'></use>
<text
className='fill-modern-green text-sm'
x='52%'
y='95%'
dominant-baseline='middle'
text-anchor='middle'
>
All rights reserved.
</text>
</g>
</svg>
</footer>

Answer 1

可以通过footer和svg的styles属性定义宽度和高度。例如:

{/* Height of footer is 30px */}
<footer className='absolute bottom-0 w-full' style={{width: '100%', height: '30px'}}>
{/* SVG Height based on the footer height */}
<svg
style={{width: '100%', height: '100%'}}
className='fill-green'
viewBox='0 0 500 150'
preserveAspectRatio='none'
xmlns='http://www.w3.org/2000/svg'
>
<defs>
<filter id='shadow'>
<feDropShadow
dx='0'
dy='0'
stdDeviation='2'
flood-color='#159F68'
/>
</filter>
<path
id='footer-shadow'
className='stroke-none'
d='M29.86,179.11 C100.86,200.36 200.94,60.48 450.84,180.09 L363.96,855.44 L0.00,190.00 Z'
></path>
</defs>
<g>
<use href='#footer-shadow' filter='url(#shadow)'></use>
<text
className='fill-modern-green text-sm'
x='52%'
y='95%'
dominant-baseline='middle'
text-anchor='middle'
>
All rights reserved.
</text>
</g>
</svg>
</footer>