Question

嗨，我是svg的新手，想创建类似这样的东西：

Both ways would be cool but I dont mind to use the easier one

这是我的代码：

<div class="row">
  <div class="col-lg-4 col-md-6">
    <div class="single-product">
      <div class="thumb">
        <img src="img/p1.png" alt="">
      </div>
      <div class="details">
        <h4>Lorem ipsum </h4>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        </p>
      </div>
    </div>
  </div>

Answer 1

使用Adobe Illustrator绘制对象，然后将其另存为SVG，您可以复制该对象提供的代码路径，它将为您生成该对象！

如果您只是在做一个矩形，尽管不需要使用svg，那么可以确定使用CSS吗？

https://helpx.adobe.com/uk/illustrator/how-to/export-svg.html

Answer 2

使用HTML5标签

<svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg>

Answer 3

在SVG上使用不带宽度和高度的viewBox属性将确保其缩放到可用空间的100％。

要实现链接示例中的第二个选项，您可以绝对定位SVG，使其位于图像列表后面。

body {
  margin: 0;
}

.container {
  position: relative;
}

.svgcontainer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: grey;
}

.items {
  position: relative;
  display: flex;
  padding-top: 50px;
}

.item {
  flex: 1 1 33%;
  text-align: center;
}
.item img {
  display: block;
  margin: 0 auto;
}

<div class="container">
  <div class="svgcontainer">
    <svg viewBox="0 0 100 30">
    <path d="M93.8993 12C77.8993 -0.49999 -0.600744 -3.99999 0.899285 9C4.39923 32.5 43 26 70 26C97 26 97.7998 15.0473 93.8993 12Z" fill="currentcolor"/>
  </svg>
  </div>

  <div class="items">
    <div class="item"><img src="https://picsum.photos/200/300" /></div>
    <div class="item"><img src="https://picsum.photos/200/300" /></div>
    <div class="item"><img src="https://picsum.photos/200/300" /></div>
  </div>
</div>

如何创建全角svg矩形背景？

3 个答案: