SVG <use>要素がChromeで表示されない

Question

HTMLページに埋め込まれたSVG要素がありますが、Firefoxでは完全に機能しますが、Chromeでは機能しません。

マスクを使用してビデオ背景をカバーしていますが、SVG要素に透明な塗りつぶし（使用エレメントのCSSクラスを使用）を使用してビデオ背景を表示しています。

私はChromeでそれを点検する際、use要素はいくつかの大きさですが、SVGのビューボックスのサイズが一致していないので、私は<use>タグと一緒に問題を特定し信じる：<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>

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>