'using a SVG as a clip-mask for an image (JSX) not scaling with clipPathUnits

I am attempting to use an svg to clip an image. I would like the clipPath to scale to the full size of the image while maintaining the svg's original width-height ratio.

I scaled my svg to 1x1 dimensions and applied clipPathUnits. However, the resulting clip only covers a small portion of the total image this is what it looks like.

The svg itself is the full size of the div (~500px x 500px) but the path itself is only ~110px wide.

How do I control the positioning and scale of the clipPath over the image?

    <div>
      <img src={ASrc} style={{ clipPath: 'url(#pebbleMask)' }} />
      <svg viewBox="0 0 1 1">
        <defs>
          <clipPath id="pebbleMask" clipPathUnits="objectBoundingBox">
            <path
              d="M0.269746 0.275481C0.213451 0.260396 0.155586 0.293804 0.140502 0.3501C0.125417 0.406395 0.161687 0.453581 0.217982 0.468666C0.274278 0.48375 0.323714 0.485342 0.338799 0.429047C0.353883 0.372751 0.326042 0.290565 0.269746 0.275481Z"
              fill="#E7EAEB"
            />
          </clipPath>
        </defs>
      </svg>
    </div>
htmlcssreactjsjsxclip-path


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions