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

Posted 2023-03-07

【中文标题】如何将 html 元素移动到 SVG 元素上？

【英文标题】：How to move html element over a SVG element?

【发布时间】：2021-11-29 22:18:12

【问题描述】：

如何将文本（段落元素）放在页脚的 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>

【参考方案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 中钳位的文章：Clamping article

【讨论】：

它可以工作，但是当我切换到移动视图时，文本会超出 svg 区域。你有什么想法吗？

如果你想实现所有屏幕比例的文本可读，那么你应该使用钳位

【参考方案2】：

约翰，如果我正确理解了你的问题，你是不是想把文本放在 svg 上？

尝试添加 display: flex;到你的父 div。

<div class="mx-auto" style="display: flex">

可能有用