使用SVG来剪切流畅的背景图形

Question

我在Wordpress中新创建的Site Origin小部件中使用以下代码。

<div class="svg-container row-svg row-separator" style="fill:<?php echo $sep_fill; ?>">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M0 0 L100 0 L100 2 L0 100 Z"></path>
        </svg>
    </div>

使用以下CSS ...

.row-separator {
margin-top: 0 !important;
margin-bottom: -175px !important;
height: 175px;
}
.svg-container {
height: 0;
position: relative;
z-index: 99;
}
svg:not(:root) {
overflow: hidden;
}
svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}

这样可以很好地修剪这样的背景图像：

我需要做的是在脚下看起来像这样，所以需要一个不同的路径。有谁知道如何指定这样一个以三角形为中心的SVG路径？

或者是否有另一种方法可以实现相同的结果？

此致

鲍勃

帮助将不胜感激，因为我不确定这是否可能？

的问候，

鲍勃

Answer 1

可以在https://www.w3.org/TR/SVG/paths.html

找到基本的SVG指南

它针对的是初学者。有关更详细的介绍，请考虑购买以下书籍：

SVG Essentials - J. David Eisenberg

用于复杂SVG概述的软件等Inkscape。