Как сделать фон у svg элемента фиксированным, чтобы при скролле изображение оставалось на месте?

есть

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <pattern id="image" patternUnits="objectBoundingBox" width="100%" height="100%">
                      <image x="0" y="0"  xlink:href="1111111.jpg" class="img" preserveAspectRatio="xMidYMid slice" width="100%" height="100%"></image>
                    </pattern>
                </defs>
                <path fill="url(#image)" d="M47.5,-62.4C62.5,-54.5,76.1,-41.9,83.4,-25.6C90.7,-9.4,91.6,10.3,80.5,20.6C69.5,30.9,46.6,31.8,31.2,40.5C15.8,49.2,7.9,65.7,1.1,64.2C-5.8,62.7,-11.5,43.2,-26.9,34.5C-42.2,25.8,-67.2,27.9,-77.6,19.6C-88,11.3,-83.8,-7.3,-74.7,-20.9C-65.6,-34.4,-51.5,-43,-38.2,-51.4C-24.9,-59.8,-12.5,-68.1,1.9,-70.7C16.3,-73.3,32.6,-70.3,47.5,-62.4Z" transform="translate(100 100)" />
              </svg>

пример

только здесь у текста прописано style:

    background: url(gif.gif);
    background-size: 100%;

    background-attachment: fixed;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;

как можно сделать такой же эффект, но только с фоном svg элемента?