使用 SVG 剪切流体背景图形答案

【问题标题】：Using SVG's to cut fluid background graphics使用 SVG 剪切流体背景图形
【发布时间】：2016-07-14 19:07:31
【问题描述】：

我在 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 路径？

或者有没有其他方法可以达到同样的效果？？

问候，

鲍勃

不胜感激，因为我不确定这是否可行？？

问候，

鲍勃

【问题讨论】：

如果你想学习如何编写 SVG <path> 元素，那么你会发现网上有很多教程。或者您可以阅读 SVG 规范。
嗨，保罗，感谢您的回复。我搜索了有关路径的信息，不幸的是大多数不是从头开始，而是假设您已经涵盖了基础知识，但事实并非如此。我现在已经获得了一些阅读材料和软件，可以创建简单和复杂的 SVG，所以我现在可以开始了。

标签： css wordpress svg widget siteorigin

【解决方案1】：

基本的 SVG 指南可以在https://www.w3.org/TR/SVG/paths.html找到

它是针对初学者的。如需更详细的了解，请考虑购买以下书籍：

SVG 基础 - J. David Eisenberg

用于复杂 SVG 轮廓等 Inkscape 的软件。

【讨论】：