时间戳

首页 > 解决方案 > 在 DIV 元素中使用带有 HTML5 的内联 SVG 作为背景

html - 在 DIV 元素中使用带有 HTML5 的内联 SVG 作为背景

问题描述

我对svgs不是很熟悉。请提出任何我可以用于以下情况的建议。我有两个如下所示的 div。第一个 div 生成一个 svg，第二个 div 是一个普通的 div。我想使用从第一个 div 生成的 SVG 作为第二个 div（main-div）的背景。我不想在这里使用绝对/固定定位。除了使用定位之外，还有什么方法可以做到这一点？

<div class="svg-div" style="height: 150px; overflow: hidden;">
  <svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
    <path d="M0.00,49.99 C150.00,150.00 349.21,-49.99 500.00,49.99 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: #08f;"></path>
  </svg>
</div>

<div class="main-div"> 
  <ul> <li>a</li><li>b</li> </ul>
</div>

谢谢

标签： htmlcsssvg

解决方案

最好将 SVG 保存到 SVG 文件中，因为它对所有浏览器来说都是最灵活的。

之后你可以使用position即使你不想要。

最后经过一番搜索，我在这里找到了一个使用 URI 的主题。

但请注意，它可能不适用于所有浏览器（特别是旧的浏览器）。

所以我搜索了一个URI-Converter to SVG。

输出是：

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 150' preserveAspectRatio='none' style='height: 100%25; width: 100%25;'%3E%3Cpath d='M0.00,49.99 C150.00,150.00 349.21,-49.99 500.00,49.99 L500.00,150.00 L0.00,150.00 Z' style='stroke: none; fill: %2308f;'%3E%3C/path%3E%3C/svg%3E");

演示

.svg-div{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 150' preserveAspectRatio='none' style='height: 100%25; width: 100%25;'%3E%3Cpath d='M0.00,49.99 C150.00,150.00 349.21,-49.99 500.00,49.99 L500.00,150.00 L0.00,150.00 Z' style='stroke: none; fill: %2308f;'%3E%3C/path%3E%3C/svg%3E");
}
<div class="svg-div" style="height: 150px; overflow: hidden;">
  <div class="main-div"> 
    <ul> <li>a</li><li>b</li> </ul>
  </div>
</div>

推荐阅读