CODEWITHSUNDEEP
htmlcsssvg
Quinton Chester
Quinton Chester

Reputation: 336

SVG clipPath not clipping properly properly

I am attempting to place a div with a clipPath on top of another div in our footer. Here is an image of what I'm trying to accomplish. In theory, this sounds simple, but I seem to be struggling with the placement and scaling of the clip-path SVG.

enter image description here

The SVG that I am using for the clip is outlined as follows:

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

When using the SVG above, I get the following result: enter image description here

When removing the clipPathUnits="objectBoundingBox", I get the following result: enter image description here

The last result without the clipPathUnits is what is most confusing, as this is what my SVG looks like (visually): enter image description here

Here is the current code...

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

}

Am I missing something in my SVG markup, or have I missed some information in terms of placement of clipPaths? Any help would be greatly appreciated.

Upvotes: 2

Views: 224

Answers (1)

Quinton Chester
Quinton Chester

Reputation: 336

Huge thank you to @enxaneta for the solution.

I followed the guide here: yoksel.github.io/relative-clip-path

And came up with this for the solution:

<?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;
        }

    }

}

Upvotes: 0

Related Questions