Question

我有一个嵌入到我的HTML页面中的SVG元素，该元素在Firefox上完美运行但在Chrome上不起作用。

我正在使用遮罩来覆盖视频背景，而SVG元素具有透明填充（使用CSS类使用元素）以通过它显示视频背景。

我相信我发现问题与<use>标记一致，因为当我在Chrome中检查它时，use元素有一些尺寸但与SVG视图框的大小不匹配：{{1}它存在于。在Firefox中，<svg viewBox="0 0 1000 300" class="svg-inverted-mask">元素的大小与视图框匹配并正确呈现。

代码：

use

Answer 1

摆脱不必要的clipPaths似乎有所帮助。

它们看起来像Illustrator添加的那种剪辑，以重现其渲染笔划的方式。但由于您的符号没有抚摸，因此可以安全删除。

<div class="wrap heightwrap wow fadeInDown" data-wow-delay="0.4s">
    <svg viewBox="0 0 1000 300" class="svg-defs">
    <!-- Symbol with Logo -->
      <symbol id="s-text2">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="30%" y="-25%" width="700" height="800" viewBox="0 0 1000 800">
            <path d="M468.896,118.65l-80.667,254.289H145.563l-24.334-62.667h188 c0,0,26.167,0.167,33.311-18.676l15.356-50.99c20.333-62.333,22.67-67.217-34-67.667c-15.121-0.12-30.689,0.122-39.254,0.072 c-17.878-0.105-22.246,0.139-20.368-10.094l10.712-34.979c0,0,1.285-9.287,17.66-9.287"/>
            <path d="M275.563,267.9c28.667,0,28.013-1.13,35.833-28.5c8-28,9.457-29.082-12-29.5 c-10.548-0.205-26.166,0-26.166,0c-51.959,0-64.834,1.5-58.222-24.03c2.682-10.354,6.587-25.693,12.221-45.637 c4.024-14.247,8.103-29.353,11.369-38.006C250.481,70.74,271.842,75.708,343.23,75.9c92.334,0.249,139.333,0,139.333,0l20.333-62 h-314l-41.553,149.031c0,0-2.537,10.65-6.408-0.212L87.896,13.9h-69l89.667,254H275.563"/>
        </svg>
      </symbol>
    <!-- Mask with text -->
      <mask id="m-text2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
        <rect width="100%" height="100%" class="mask__shape">
        </rect>
        <use href="#s-text2" class="mask__text"></use>
      </mask>
   </svg>

   <div class="box-with-text">
   <!-- Container for video -->
   <div class="text-fill">
   <video class="video" src="/css/fractal3.mp4" autoplay loop></video>
  </div>
  <!-- Visible SVG -->
   <svg viewBox="0 0 1000 300" class="svg-inverted-mask">
    <rect width="100%" height="100%" mask="url(#m-text2)" class="shape--fill" />
      <use href="#s-text2" class="text--transparent"></use>
    </svg>
   </div>
</div>

在Chrome

1 个答案: