如何将段落放入svg背景

Question

如何将一些段落放入SVG文件中？

<div className="row footer"> 
  <div className="col mt-5 col-lg-4 col-md-6 col-sm-12">Test footer</div> 
  <div className="col mt-5 col-lg-4 col-md-6 col-sm-12">Test footer</div> 
  <div className="col mt-5 col-lg-4 col-md-6 col-sm-12">Test footer</div> 
</div>

.footer { 
  background-image: url('../images/curve-bg-footer.png') !important; }

谢谢

​

[

​

Answer 1

从你的问题中还不清楚SVG应该在HTML文档中还是在CSS中。在本例中，我在CSS中使用SVG作为背景。

这是SVG：

<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 100 60">
  <path fill="blue" d="M 0 0 V 10 H 100 V 0 C 90 0 85 3 75 3 C 65 3 60 0 50 0 C 40 0 35 3 25 3 C 15 3 10 0 0 0 Z"/>
  <rect x="0" y="10" width="100" height="50" fill="blue" />
</svg>

下面是一个完整的示例，其中我将SVG的URL转换为数据URI。在这里，页脚的高度为150 in，但是如果您添加了正确的内容，您可能可以删除“高度”属性，只需在顶部添加一个填充即可。

​

.footer {
  display: flex;
  height: 150px;
  flex-direction: row;
  align-items: flex-end;
  padding: 1em;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAwIiB2aWV3Qm94PSIwIDAgMTAwIDYwIj4KICA8cGF0aCBmaWxsPSJibHVlIiBkPSJNIDAgMCBWIDEwIEggMTAwIFYgMCBDIDkwIDAgODUgMyA3NSAzIEMgNjUgMyA2MCAwIDUwIDAgQyA0MCAwIDM1IDMgMjUgMyBDIDE1IDMgMTAgMCAwIDAgWiIvPgo8cmVjdCB4PSIwIiB5PSIxMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSI1MCIgZmlsbD0iYmx1ZSIgLz4KPC9zdmc+');
  background-repeat: repeat-x;
  color: white;
}

.footer div {
  flex-grow: 1;
}

<div class="row footer">
  <div class="col mt-5 col-lg-4 col-md-6 col-sm-12">Test footer</div>
  <div class="col mt-5 col-lg-4 col-md-6 col-sm-12">Test footer</div>
  <div class="col mt-5 col-lg-4 col-md-6 col-sm-12">Test footer</div>
</div>

​