SVG <use> 元素在 Chrome 中不可见答案

【问题标题】：SVG <use> element not visible in ChromeSVG <use> 元素在 Chrome 中不可见
【发布时间】：2018-04-29 11:54:19
【问题描述】：

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

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

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

代码：

<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">
            <defs>
              <rect id="a" x="50%" y="50%" width="612" height="792"/>
            </defs>
            <clipPath id="b">
              <use href="#a" overflow="visible"/>
            </clipPath>
            <path clip-path="url(#b)" 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 clip-path="url(#b)" 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>

【问题讨论】：

标签： google-chrome svg cross-browser

【解决方案1】：

摆脱不必要的剪辑路径似乎有所帮助。

它们看起来就像 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>

【讨论】：