Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 模拟与SVG文本填充属性的背景附件修复相同的效果_Css_Svg_Background Attachment - Fatal编程技术网
Fatal编程技术网
  • css/
  • Css 模拟与SVG文本填充属性的背景附件修复相同的效果

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

css svg

Css 模拟与SVG文本填充属性的背景附件修复相同的效果,css,svg,background-attachment,Css,Svg,Background Attachment,我有一个带有Hello的SVG，但是，当滚动时，我希望通过在div上使用背景附件设置其背景来获得背景的视差效果：固定 有没有什么方法可以通过SVG实现这一点？ 我知道通过操纵模式元素中的模式转换矩阵来实现这一点，但是我希望实现这一点而不需要额外的脚本。不，对不起。纯SVG不能满足您的需要。我能想到的唯一解决方法是SVG+HTML混合解决方案，其中文本实际上是纯色形状中的一个孔（例如），通过它可以看到父元素的背景。并将背景放在父元素上 例如： <div style="background:u

我有一个带有
Hello
的SVG，但是，当滚动时，我希望通过在div上使用
背景附件设置其背景来获得背景的视差效果：固定

有没有什么方法可以通过SVG实现这一点？

我知道通过操纵
模式
元素中的
模式转换
矩阵来实现这一点，但是我希望实现这一点而不需要额外的脚本。
不，对不起。纯SVG不能满足您的需要。我能想到的唯一解决方法是SVG+HTML混合解决方案，其中文本实际上是纯色形状中的一个孔（例如
），通过它可以看到
父元素的背景。并将背景放在父元素上

例如：


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




我的文字



为清晰起见，这已被简化，但希望您能理解。
谢谢@bigbadaboom，唯一的问题是，在蒙版
文本
之前可能需要一个
矩形
，以便可以剪切，将蒙版内部的矩形填充设置为白色，外部的矩形需要颜色是的，您是对的。我可能把它简化了一点。：）我很高兴你明白我的意思。