SVG <use> Element nicht in Chrome sichtbar

Question

Ich habe ein SVG-Element, das in meine HTML-Seite eingebettet ist, die perfekt in Firefox funktioniert, aber nicht in Chrome funktioniert.

Ich verwende eine Maske, um einen Videohintergrund abzudecken, während das SVG-Element eine transparente Füllung hat (mit der CSS-Klasse im use-Element), um den Videohintergrund anzuzeigen.

Ich glaube, ich habe das Problem identifiziert mit dem <use>-Tag zu sein, weil, wenn ich es in Chrome inspizieren, das use Element einige Dimensionen hat, aber nicht entspricht, die Größe des SVG Sichtgerätes. <svg viewBox="0 0 1000 300" class="svg-inverted-mask">, die es in lebt in Firefox, die Größe von use Element stimmt mit der Viewbox überein und rendert korrekt.

Code:

<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

Loswerden der unnötigen clipPaths scheint zu helfen.

Sie sehen aus wie die Art von Clips, die Illustrator hinzufügt, um die Art und Weise der Darstellung von Strichen zu reproduzieren. Da Ihr Symbol jedoch nicht streichelt, können Sie es sicher entfernen.

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