Question

我有这个SVG：

<svg class="decor" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0 L50 100 L100 0 L100 100 L0 100" stroke-width="0"></path>
</svg>

这有效，但我需要透明的外部和黑色内部。在我的代码中，这是逆向的。

如何生成这个？

DEMO

Answer 1

只需更改SVG路径（path属性）的坐标即可形成三角形而不是形状。

修改后的d="M0 0 L50 100 L100 0z"（M0 0）的工作原理如下：

L 50 100 - 将笔移至0,0（左上角）
L 100 0 - 绘制从0,0到50,100（底部中心点）的直线
z - 画一条从50,100到100 0的线（右上角）
path - 通过从最后一个点（100,0）到第一个点（0,0）绘制一条线来关闭路径

默认情况下，

SVG fill元素会变成黑色* { background: #e1e1e1; } .decor { height: 80px }，因此三角形会变成黑色，而外部则保持透明。

<div class="decor">
  <svg class="decor" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0 L50 100 L100 0z" stroke-width="0"></path>
  </svg>
</div>

path

使用路径剪辑图片

如果需要使用clipPath将背景图片剪裁成所需的形状，那么最好使用clip-path元素和* { background: #e1e1e1; } .decor { height: 80px; background: url(http://lorempixel.com/200/80); -webkit-clip-path: url(#clipper); clip-path: url(#clipper); } CSS属性，如下面的代码段所示：

<div class="decor">
  <svg height="0" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="0" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <clipPath id="clipper" clipPathUnits="objectBoundingBox">
        <path d="M0 0 L.5 1 L1 0z"></path>
      </clipPath>
    </defs>
  </svg>
</div>

.div-1 {
  position: relative;
  height: 500px;
  width: 100%;
}
.decor-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('http://lorempixel.com/550/500');
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}
.div-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 100%;
  background-image: url('http://kinderhtml.themerex.net/img/bg/texture_2.png');
  background-color: green;
  -webkit-clip-path: url(#clipper2);
  clip-path: url(#clipper2);
}

将所有部分放在一起，下面的代码应该实现图像中提供的输出。

<div class="div-1">
  <div class="decor-top">
    <svg height="0" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="0" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <clipPath id="clipper" clipPathUnits="objectBoundingBox">
          <path d="M0 0 L.5 .1 L1 0 1,1 0,1z"></path>
        </clipPath>
      </defs>
    </svg>
  </div>
  <div class="div-2">
    <svg height="0" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="0" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <clipPath id="clipper2" clipPathUnits="objectBoundingBox">
          <path d="M0 0 L.5 .25 L1 0 1,1 0,1z"></path>
        </clipPath>
      </defs>
    </svg>
  </div>
</div>

path

原始d="M0 0 L50 100 L100 0 L100 100 L0 100"（M0 0）的工作原理如下：

L 50 100 - 将笔移至0,0（左上角）
L 100 0 - 绘制从0,0到50,100（底部中心点）的直线
L 100 100 - 画一条从50,100到100 0的线（右上角）
L0 100 - 从100,0到100,100（右下角）画一条线
path - 画一条从100,100到0,100的线（左下角）

因此，上面的{{1}}最终会形成一个看起来像一个矩形的形状，顶部有一个三角形切口。

SVG中的反透明区域

1 个答案: