Discussion :

[labarre2002]

Bonjour

je réalise une animation au hover sur une page

au départ j'ai ça:



au hover j' obtiens ca :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
              <div class="pic deux">
                        <svg>
                        </svg>    
                            <h1><span>air&nbsp;max</span></h1>
               </div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
svg{
    width:300px;
    height:150px;
    display: block;
    transform: rotate(-45deg);
    z-index:7;
   }
h1 span{
    font-weight: bold;
    text-transform: uppercase; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity:0;
    z-index:1;
    transition: .5s ease;
}
 
.pic:hover{
flex: 2;
transform-origin: left;
}
 
.pic:hover  h1 span{
opacity: 1;
 font-size:12em;
}

j'ai du mal a comprendre pourquoi le z-index ne marche pas sur l 'élément svg.
Pourrais-je avoir des explications SVP ?

Merci.

[Archimède]

La réponse est dans la doc officielle...
https://www.w3.org/TR/SVG2/render.html#RenderingOrder

[unanonyme]

La réponse est dans la doc officielle...
https://www.w3.org/TR/SVG2/render.html#RenderingOrder

Bonjour,

je ne pense pas que ce soit la bonne doc.
Celle ci concerne le corps des balises SVG.

Le PO manipule les z-index du DOM.

Je soupçonne que le svg est transparent et que ça s'affiche noir sur noir,
ou alors qu'il eu fallut appliquer le z-index sur le h1 et non le span, pas certain,
de toutes façons on ne peut pas le tester.

cf
https://www.w3.org/TR/SVG2/render.html#Definitions
https://www.w3.org/TR/SVG2/struct.ht...cumentFragment

Bonne journée.

[labarre2002]

Bonjour merci

pour vos méssages @unanonyme en effet les svg sont transparent et sont en noir et blanc.