16

背景のある要素 (画像または無地の色は実際には関係ありません):

<header id="block-header"></header>

SVG を使用してクリップパスを適用しようとしています。これを実現するために、次のように SVG インラインを同じ要素に入れています。

<header id="block-header">
    …
    <svg width="100%" height="100%" viewBox="0 0 4000 1696" preserveAspectRatio="none">
        <defs>
          <clipPath id="myClip">
            <path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/>
          </clipPath>
        </defs>
    </svg>
    …
</header>

以下のコード スニペットを実行するか、JSFiddleを確認できます。元の SVG 画像 (黒) がインラインで配置され、下部に曲線があり、応答性が高いことがわかります。対照的に、赤い四角形は、同じイメージがclip-path.

ここで正確に何が間違っているのかを見つけることはできませんが、どちらかviewBoxまたは属性を誤解していると思います。preserveAspectRatioどんな助けでも大歓迎です。

#block-header {
    background: Red;
    min-height: 100px;
    -webkit-clip-path: url(#myClip);
	clip-path: url(#myClip);
}
<h1>SVG image</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 4000 1696" preserveAspectRatio="none"><path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/></svg>

<h1><code>clip-path</code> using the same SVG</h1>
<header id="block-header">
    <svg width="100%" height="100" viewBox="0 0 4000 1696" preserveAspectRatio="none">
        <defs>
          <clipPath id="myClip">
            <path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/>
          </clipPath>
        </defs>
    </svg>
</header>

4

1 に答える 1

24

SVG クリップ パスへの参照は、クリップ パス定義自体に対するものであり、このコンテキストでは、寸法やその他の属性<svg>は無意味です。

あなたの例で起こっていることは、4000 ピクセル幅のクリップ パスをヘッダーに適用していることです。これはおそらく幅 900 ピクセル程度です。したがって、曲率は表示されません。

レスポンシブ クリップ パスが必要な場合は、 を使用して定義する必要がありますclipPathUnits="objectBoundingBox"。

#block-header {
    background: Red;
    min-height: 100px;
    -webkit-clip-path: url(#myClip);
	clip-path: url(#myClip);
}
<h1>SVG image</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 1 1" preserveAspectRatio="none"><path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z"/></svg>

<h1><code>clip-path</code> using the same SVG</h1>
<header id="block-header">
    <svg width="0" height="0">
        <defs>
          <clipPath id="myClip" clipPathUnits="objectBoundingBox">
            <path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z"/>
          </clipPath>
        </defs>
    </svg>
</header>

ここでフィドル

于 2015-02-04T01:40:52.037 に答える