css - 模拟与 SVG 文本填充属性的背景附件修复相同的效果

Question

但是，我有一个带有 的 SVG <text fill='url(#img1)'>Hello</text>，在滚动时，我想通过在 div 上使用 设置其背景来获得与背景相同的视差效果background-attachment:fixed。

有什么方法可以使用 SVG 实现开箱即用？我知道Raphaël.js通过操纵元素patternTransform内的矩阵pattern来实现这一点，但是我想在不需要额外脚本的情况下实现这一点。

Answer 1

不抱歉。你不能用纯 SVG 做你想做的事。我能想到的唯一一种解决方法是混合 SVG+HTML 解决方案，其中您的文本实际上是纯色形状（例如 a <rect>）中的一个孔，您可以通过它看到<svg>s 父元素的背景。并将背景放在父元素上。

IE。就像是：

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

为了清楚起见，这已被简化，但希望您能明白这一点。