Utilisez un élément enfant du groupe pour extraire ou couvrir un autre élément

Je travaille sur un plan SVG et j'ai rencontré un problème.

Je crois que la question se pose parce que j'ai dû regrouper deux éléments semi-translucides, de sorte que lorsqu'ils se chevauchent, ils semblent être une unité solide.

Voici un MCVE, qui devrait être visualisé dans Chrome car je n'ai pas utilisé de valeurs "absolues" pour l'origine d'un élément.

leftRoomFill.style.fill = '#fff'; leftRoomDoorFill.style.fill = '#fff'; leftRoomFill.style.opacity = '1'; leftRoomDoorFill.style.opacity = '1'; console.log(window.getComputedStyle(leftRoomFill).opacity); console.log(window.getComputedStyle(leftRoomDoorFill).opacity);

La question est que, même si elle se connecte pour consolider que les opacities des éléments sont définies sur 1, il semble que les opacités des éléments ne changent pas et sont toujours 0.

J'ai essayé ce qui suit, ce qui ajoute à ma conviction que le problème est une question d'opacité.

 rightRoomFill.style.zIndex = '1'; leftRoomFill.style.zIndex = '2'; leftRoomDoorFill.style.zIndex = '2';

Est-ce que quelqu'un sait pourquoi le code ci-dessus n'a apparemment aucun effet?

Ce que j'essaie de faire, c'est utiliser l'élément de remplissage de la porte pour recadrer la pièce dans laquelle la porte s'étend.

Je sais que je pourrais simplement dégrouper les éléments de remplissage et utiliser les couleurs sans opacité, mais j'aimerais bien garder la flexibilité de pouvoir utiliser des remplissages semi-translucides.

Des idées?

La propriété zIndex ne réorganise pas les éléments SVG (au moins pas encore).

Il semble que vous voulez que le remplissage de la porte d'un groupe de la chambre de gauche "couvre" le plancher de la chambre droite en remontant le sol droit de la pièce. Cependant, vous souhaitez le faire, en ayant une seule copie du remplissage de la porte qui, dans ce cas, est regroupée avec le plancher dont cette porte s'ouvre, c'est-à-dire le sol gauche. Il semble que vous ne souhaitez pas créer une porte maîtresse dans une section <defs> , puis copiez-la plusieurs fois avec les éléments <use> . Bien que je ne sois pas sur que c'est la meilleure stratégie, si vous voulez vraiment faire cela, une façon est de déplacer le plancher qui est actuellement visible (c.-à-d. Le moused) vers le bas visible de la pile de planchers SVG, c'est-à-dire Au code-haut du nœud parent du plancher. Vous pouvez le faire avec le code suivant qui est exécuté chaque fois qu'un étage particulier est moused: myFloorNode.parentNode.insertBefore(myFloorNode, myFloorNode.parentNode.firstChild); . Ensuite, toute autre porte remplit ce chevauchement que le plancher la "recouvre", "coupe" cette partie du plancher.

Ce que je trouve un peu désordonné à propos de cette approche, c'est qu'il faut constamment mélanger vos éléments de plancher autour. Ce n'est pas nécessairement mortel. Cependant, cela me rend un peu mal à l'aise, car cela pourrait créer une certaine confusion si le remaniement devient plus compliqué. Il vous faut également que le remplissage de cette porte soit totalement opaque, ce qui peut ou non être acceptable. En tout cas, c'est juste mon intuition, et dépendra exactement de la façon dont vous l'implémentez.

Vous pouvez effectuer une mise en œuvre simple de cette stratégie en modifiant votre code comme suit:

 function setFillOpacity(){ this.style.opacity = '0.5'; // *** add the following line: this.parentNode.insertBefore(this, this.parentNode.firstChild); if (this.id === 'right-room-fill'){...

Notez cependant que, avec juste un changement, parfois, votre remplissage de porte semble être en position "fermée" même si la course de porte est en position "ouverte". Il semble s'avérer finalement fonctionner par "ouverture" à la fin d'une animation dynamique d'une fermeture de porte, puis réouverture. Cependant, je pense que vous devrez travailler sur le code pour vous assurer que le remplissage de la porte commence dans la position correcte. Je vais vous laisser travailler avec ce problème.

Ce n'est pas clair ce que vous demandez. Pourquoi pensez-vous que les opacities de la pièce sont 0? Ils sont devenus visibles (vert) pour moi dans Chrome. Donc, une valeur de «1» me paraît correcte. Qu'est-ce qui se supposerait que ce n'est pas le cas?

Re votre question zIndex: vous devrez probablement utiliser une approche différente. Z-index ne fonctionne pas actuellement sur les éléments SVG. Il a été ajouté à SVG 2, mais je ne pense pas que tout navigateur le supporte encore.