Имитировать тот же эффект, что и в фоновом режиме, для свойства заполнения текста SVG

Question

У меня есть SVG с <text fill='url(#img1)'>Hello</text> однако, при прокрутке я хотел бы получить эффект параллакса с фоном, выполнив то же самое, что и для div, установив его фон с background-attachment:fixed,

Есть ли способ достичь этого из коробки с SVG? Я знаю, Raphaël.js достигают этого, манипулируя patternTransform матрица в пределах pattern элемент, однако я хотел бы достичь этого без необходимости дополнительных сценариев.

Answer 1

Нет извините. Вы не можете делать то, что вы хотите с чистым SVG. Единственный обходной путь, о котором я могу подумать, - это смешанное решение SVG+HTML, где ваш текст фактически представлял собой дыру в форме сплошного цвета (например, <rect>) через который вы могли видеть фон <svg>родительский элемент И поместите фон на родительский элемент.

То есть. что-то вроде:

<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>

Это было упрощено для ясности, но, надеюсь, вы поняли идею.