Centre un élément d'un masque SVG

Question

Je suis un débutant en SVG donc c'est probablement une question facile. J'essaye de faire un masque de SVG avec une forme simple de triangle à l'intérieur d'un rectangle. Ce que je veux atteindre est d'obtenir le rectangle réactif avec sa largeur, mais le triangle doit - obtenir une taille fixe - toujours au centre de la fenêtre

Vous comprendrez mieux avec mon extrait:

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

C'est workning actuellement en chrome, mais le translateX (ou traduire) ne fonctionne pas dans Firefox et le bord. J'ai essayé d'utiliser l'attribut SVG de transformation, mais il semble que je ne puisse pas utiliser les valeurs de pourcentages. Je ne suis pas vraiment familier avec la viewbox mais je ne suis pas sûr que cela aidera dans ce cas.

Merci quand même pour toute sorte d'aide!

Answer 1

Voici une façon de réaliser ce que vous voulez sans compter sur de nouvelles unités ou calc(). Il devrait être compatible avec tous les navigateurs.

Comment ça marche:

1. Nous terminerons le triangle dans un SVG imbriqué. Nous utilisons un SVG car il a un attribut x qui peut prendre des pourcentages.

2. Nous positionnons ce fichier SVG imbriqué à x="50%". Il est maintenant centré dans le masque (à peu près, voir l'étape suivante). On déplace la forme du triangle pour qu'elle soit centrée sur x = 0. C'est pour qu'il ne soit pas décalé par rapport au centre du masque.

3. Nous avons défini overflow="visible" sur le SVG imbriqué afin que la partie du triangle qui est maintenant à gauche du SVG (par exemple x < 0) ne soit pas écrêtée.

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