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

Question

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

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

Answer 1

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

即。像这样:

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

为了清楚起见，已经对此进行了简化，但希望您能明白。