My SVG background image is not covering the specific PATH

I’m having a problem setting a image in svg background, i have this svg code:

SVG tag: `

<svg
      viewBox="0 0 530 510"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={style.my_svg}
    >

defs to define the image:

<defs>
        <pattern
          id="copo"
          patternUnits="userSpaceOnUse"
          width="100%"
          height="100%"
        >
          <image
            href={copo}
            x="0"
            y="0"
            width="100%"
            height="100%"
            preserveAspectRatio="xMidYMid meet"
          />
        </pattern>
      </defs>

Especific PATH:

<path
        d="M217.403 137C184.598 137 158 109.911 158 76.5C158 43.0885 184.598 16 217.403 16C250.208 16 250.208 137 217.403 137Z"
        fill="url(#copo)"
      />

I need to cover all the image in the path that have fill="url(#copo)" in the path size. But the image are exceeding. How can i set this correctly?

The image are defined in defs, and i’m using reactJS.

You need to sign in to view this answers

Related Post