Center ein Element einer SVG-Maske

Question

Ich bin ein Neuling in SVG, so ist es wahrscheinlich eine einfache Frage. Ich versuche eine SVG-Maske mit einer einfachen Dreiecksform innerhalb eines Rechtecks ​​zu erstellen. Was ich erreichen will, ist das Rechteck als Reaktion mit seiner Breite zu erhalten, aber das Dreieck sollte - erhält eine feste Größe - immer in der Mitte des Darstellungs

Sie werden verstehen, besser mit meinem Schnipsel:

.header-arrow { 
 
    height: 70px; 
 
} 
 
svg { 
 
    height: inherit; 
 
} 
 
#arrow-down-alpha { 
 
    transform: translateX(calc(50vw - 130px/2)); 
 
}

<div class="header-arrow"> 
 
    <svg width="100%"> 
 
    <defs> 
 
     <mask id="myMask" x="0" y="0" width="100%" height="100%"> 
 
     <rect fill="white" x="0" y="0" width="100%" height="100%" /> 
 
     <polygon id="arrow-down-alpha" fill="black" x="00" y="0" width="165px" height="100%" points="55.91 37.8 111.81 0 0 0 55.91 37.8" /> 
 
     </mask> 
 
    </defs> 
 

 
    <rect id="base-mask" mask="url(#myMask)" x="0" y="0" width="100%" height="100%" /> 
 
    </svg> 
 
</div>

Es workning jetzt in Chrom, aber die translateX (oder übersetzen) funktioniert nicht in Firefox und Rand. Ich habe versucht, das Transform SVG-Attribut zu verwenden, aber es scheint, dass ich Prozentwerte nicht verwenden kann. Ich bin nicht wirklich vertraut mit der Viewbox, aber ich bin mir nicht sicher, es wird in diesem Fall helfen.

Danke trotzdem für jede Art von Hilfe!

Answer 1

Hier ist eine Möglichkeit zu erreichen, was Sie wollen, ohne auf neue Einheiten oder calc() angewiesen zu sein. Es sollte auch browserübergreifend kompatibel sein.

Wie es funktioniert:

1. Wir das Dreieck in einer verschachtelten SVG wickeln. Wir verwenden ein SVG, weil es ein x Attribut hat, das Prozentsätze annehmen kann.

2. Wir positionieren dieses verschachtelte SVG unter x="50%". Es ist jetzt in der Maske zentriert (ungefähr, siehe nächster Schritt).

3. Wir verschieben die Dreiecksform so, dass sie bei x = 0 zentriert ist. Das ist so, dass es nicht von der Mitte der Maske versetzt ist.

4. Wir setzen auf der overflow="visible" nested SVG so der Teil des Dreiecks, der sich nun aus der linken Seite des SVG (dh. < x 0) nicht abgeschnitten werden.

.header-arrow { 
 
    height: 70px; 
 
} 
 
svg { 
 
    height: inherit; 
 
}

<div class="header-arrow"> 
 
    <svg width="100%"> 
 
    <defs> 
 
     <mask id="myMask" x="0" y="0" width="100%" height="100%"> 
 
     <rect fill="white" x="0" y="0" width="100%" height="100%" /> 
 
     <svg x="50%" overflow="visible"> 
 
      <polygon fill="black" points="0 38 56 0 -56 0" /> 
 
     </svg> 
 
     </mask> 
 
    </defs> 
 

 
    <rect id="base-mask" mask="url(#myMask)" x="0" y="0" width="100%" height="100%" /> 
 
    </svg> 
 
</div>