Simulate the same effect as background-attachment fix for SVG text fill property

Question

I have an SVG with a <text fill='url(#img1)'>Hello</text> however, when scrolling I would like to get a parallax effect with the background by doing the same I would on a div setting its background with background-attachment:fixed.

Is there any way to achieve that out-of-the-box with SVG? I know Raphaël.js achieve this by manipulating the patternTransform matrix within the pattern element, however I would like to achieve this without the need for additional scripting.

Answer 1

No sorry. You can't do what you want with pure SVG. The only sort-of workaround I can think of is a mixed SVG+HTML solution where your text was actually a hole in a solid colour shape (eg a <rect>) through which you could see the background of the <svg>s parent element. And put the background on the parent element.

Ie. something like:

<div style="background:url(foo); background-attachment:fixed">
   <svg>
      <defs>
         <mask id ="mytext">
            <text>My text</text>
         </mask>
      </defs>
      <rect mask="url(#mytext)"/>
   </svg>
</div>

This has been simplified for clarity, but hopefully you get the idea.