SVGclipPathが正しくクリッピングされない

debugcn 投稿 Dev

クイントンチェスター

フッター内の別のdivの上にclipPathを使用してdivを配置しようとしています。これが私が達成しようとしていることのイメージです。理論的にはこれは単純に聞こえますが、クリップパスSVGの配置とスケーリングに苦労しているようです。

私がクリップに使用しているSVGの概要は次のとおりです。

<svg height="0" width="0">
    <defs>
        <clipPath id="clipName" clipPathUnits="objectBoundingBox">
            <path class="st0" d="M0,0v258.5l2.9,0.3l636.9,65.3c28.5,2.9,57.2,2.9,85.7,0l637.6-65.3l2.9-0.3l0,73.5h0V0H0z"/>
        </clipPath>
    </defs>
</svg>

上記のSVGを使用すると、次の結果が得られます。

を削除するclipPathUnits="objectBoundingBox"と、次の結果が得られます。

clipPathUnitsを使用しない最後の結果は、私のSVGが（視覚的に）どのように見えるかであるため、最も混乱するものです。

これが現在のコードです...

<div class="map-container">

    <div class="acf-map">

        <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>

    </div>

    <div class="map-clip">

        <?php echo file_get_contents(get_template_directory_uri() . '/img/map-template.svg'); ?>

    </div>

</div>

.map-container {
    position: absolute;
    left: 0;
    right: 0;
    top: -15rem;
    z-index: 3;
    width: 100%;
    clip-path: url(#clipName);

    .acf-map {
        width: 100%;
        height: 20rem;

        img {
            max-width: inherit !important;
        }

    }

    .map-clip {
        display: none;
    }

}

SVGマークアップに何かが欠けていますか、それともclipPathsの配置に関する情報が欠けていますか？どんな助けでも大歓迎です。

クイントンチェスター

解決策を提供してくれた@enxanetaに心から感謝します。

私はここのガイドに従いました：yoksel.github.io/relative-clip-path

そして、解決策のためにこれを思いついた：

<?php echo file_get_contents(get_template_directory_uri() . '/img/map-template.svg'); ?>

<div class="map-container">

    <div class="acf-map">

        <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>

    </div>

</div>

svg {
    position: absolute;
    width: 0;
    height: 0;
}

.map-container {
    position: absolute;
    left: 0;
    right: 0;
    top: -15rem;
    z-index: 3;
    clip-path: url(#clipName);

    .acf-map {
        width: 100%;
        height: 20rem;

        img {
            max-width: inherit !important;
        }

    }

}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]