reactjs 如何使页脚不占半页？

piah890a 于 2022-12-18 发布在 React

关注(0)|答案(1)|浏览(136)

所以我有这个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>

reactjs

来源：https://stackoverflow.com/questions/74832085/how-to-make-the-footer-not-take-up-half-of-the-page

1条答案

按热度按时间

fnx2tebb1#

您可以通过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>

赞(0）回复(0）举报 2022-12-18

我来回答

reactjs 如何使页脚不占半页？

1条答案

相关问题

热门标签

最新问答