The image is supposed to be clipped along the SVG path provided but the SVG seems to be oversized. How can the SVG as a whole or its path be adjusted in terms of image positioning/SVG width and height or image background-size in order for it to perfectly clip the image provided?
Perhaps I would also like the size of the image to dictate the dimensions of the SVG so that there's no need to adjust the SVG to suit the image and merely passing it's path to the image's clip-path gets the job done (which is how nearly all tutorials and docs show it's done).
Please note that I've already tried things like adding a viewbox attribute and value to the SVG, switching clipPathUnits to "objectBoundingBox", wrapping the path in <defs> and whole bunch of other things.
<section className={styles.secondaryFeaturedProjectsSection}>
<img
className={styles.clip_container}
src={bgImg}
alt="Processor chipset image."
/>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 600 550"
className={styles.svg}
>
<defs>
<clipPath id="one">
<path
xmlns="http://www.w3.org/2000/svg"
d="M484 224.5V281h123V168H484v56.5M1142 914v220h440v441h439.996l.252-220.25.252-220.25 222.75-.252 222.75-.252V694H1142v220M10.669 1613.665c-.368.367-.669 165.068-.669 366.002V2345h242.996l.252-244.25.252-244.25 121.754-.254 121.754-.254-.254-121.246-.254-121.246-242.581-.252c-133.42-.139-242.883.049-243.25.417M826 2048v129h260v-258H826v129m-132 584.067V3000h281v-240.25c-.001-132.137-.3-297.237-.665-366.889l-.665-126.638-31.085-.59c-17.097-.324-80.022-.794-139.835-1.044l-108.75-.454v367.932M1839 2566v88h206v176h414v-64.838c0-35.662-.297-75.037-.66-87.5l-.659-22.662h-46.176c-25.397 0-71.9-.299-103.34-.664l-57.165-.664V2478h-412v88m729 0v88h206v346h206v-522h-412v88"
fillRule="evenodd"
/>
</clipPath>
</defs>
</svg>
</section>
This is a vite react project. I am well aware of image masking but I need clip-path for an animation and this doesn’t solve my problem as it recommends masking! Thanks for your time.
