SVGを使用して流体の背景グラフィックをカットする

Question

Wordpressで新しく作成したSite Originウィジェット内で次のコードを使用しています。以下のCSSで

<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> 

...

.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

基本的なSVGガイドは、それが初心者を目指していますhttps://www.w3.org/TR/SVG/paths.html

で見つけることができます。より詳細な一見のための次の書籍の購入を検討：

SVGエッセンシャル - 複雑なSVGのためのJ.デイヴィッド・アイゼンバーグ

ソフトウェアなどInkscapeの概要を説明します。