html - 如何将 html 元素移动到 SVG 元素上？

Question

如何将文本（段落元素）放在页脚上的 svg 元素上。我尝试在我的 svg 中使用 z-index:-0 但它不起作用。

我正在为 css 使用 tailwindcss。这是当前输出的样子。

<footer>

  <div class="mx-auto">
    <div class="flex justify-center">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, qui!</p>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class=""style="position:absolute; z-index: -1;">
    <path fill="#273036" fill-opacity="1" d="M0,224L30,224C60,224,120,224,180,202.7C240,181,300,139,360,122.7C420,107,480,117,540,106.7C600,96,660,64,720,69.3C780,75,840,117,900,144C960,171,1020,181,1080,154.7C1140,128,1200,64,1260,53.3C1320,43,1380,85,1410,106.7L1440,128L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z">

  </path>
  
  
  
  </svg>       
</div>
</footer>

标签： htmlsvgtailwind-css

Answer 1

display: flex只需添加到您的父 div即可轻松实现您想要做的事情（将文本放在 svg 上） 。

这是您可以使用的代码：

<footer>

  <div class="mx-auto" style="display: flex">
    <div class="flex justify-center">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, qui!</p>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class=""style="position:absolute; z-index: -1;">
    <path fill="#273036" fill-opacity="1" d="M0,224L30,224C60,224,120,224,180,202.7C240,181,300,139,360,122.7C420,107,480,117,540,106.7C600,96,660,64,720,69.3C780,75,840,117,900,144C960,171,1020,181,1080,154.7C1140,128,1200,64,1260,53.3C1320,43,1380,85,1410,106.7L1440,128L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z">

  </path>
  
  
  
  </svg>       
</div>
</footer><footer>

  <div class="mx-auto">
    <div class="flex justify-center">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, qui!</p>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class=""style="position:absolute; z-index: -1;">
    <path fill="#273036" fill-opacity="1" d="M0,224L30,224C60,224,120,224,180,202.7C240,181,300,139,360,122.7C420,107,480,117,540,106.7C600,96,660,64,720,69.3C780,75,840,117,900,144C960,171,1020,181,1080,154.7C1140,128,1200,64,1260,53.3C1320,43,1380,85,1410,106.7L1440,128L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z">

  </path>
  
  
  
  </svg>       
</div>
</footer>

您还可以使 svg 的位置变粘，然后根据需要移动文本，但我认为我提供的代码也可以工作，并且需要更少的工作。

为了在移动视图中获得清晰的文本外观，您应该使用钳位。这是一篇关于 css 中钳位的文章：钳位文章