Le SVG à l'intérieur d'un lien n'est pas cliquable dans IE11 lorsque les événements du pointeur sont définis sur None.

Question

J'ai un fichier HTML/CSS similaire à celui-ci.

.window{
  position: absolute;
  width: 150px;
  height: 100px;
  background-color: #424242
}
svg{
  pointer-events: none;
}

.b{
  height: 40px;
  width: 40px;
  position: absolute;
  bottom: 8px;
  right: 8px;
}

<div class="window">
  <div class="b">
    <a href="https://www.google.com" target="_blank">
      <svg height='100%' width='100%'>
        <rect width='100%' height='100%' style='fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)'></rect>
      </svg>
    </a>
    </div>
</div>

Sur Chrome, je peux cliquer sur le SVG bleu avec le lien, mais sur IE11, je ne peux pas. Quelqu'un sait-il pourquoi c'est le cas, et ce que je peux faire pour résoudre ce problème sur IE, sans que cela ait un impact sur les autres navigateurs ? La règle SVG est destinée à d'autres SVG, il serait donc agréable de ne pas avoir à la modifier.

Merci !

Answer 1

Le problème n'est pas le SVG lui-même ou le système de gestion de l'information. pointer-events . Le problème est le suivant a et comment IE 11 rend la balise lorsqu'elle contient des éléments de bloc.

La solution que j'ai testée consiste à donner un style à l a pour remplir son conteneur :

a {
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
}

J'ai rencontré ce problème auparavant, avec des SVG en tant qu'images, dans des versions plus anciennes d'Internet Explorer.

J'espère que cela vous aidera !

.window{
  position: absolute;
  width: 150px;
  height: 100px;
  background-color: #424242
}
svg{
  pointer-events: none;
}

.b{
  height: 40px;
  width: 40px;
  position: absolute;
  bottom: 8px;
  right: 8px;
}

a {
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
}

<div class="window">
  <div class="b">
    <a href="https://www.google.com" target="_blank">
      <svg height='100%' width='100%'>
        <rect width='100%' height='100%' style='fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)'></rect>
      </svg>
    </a>
  </div>
</div>

EDIT : Je vais essayer d'expliquer mon expérience à ce sujet. Les anciens navigateurs, y compris les anciennes versions de Firefox, Chrome et Internet Explorer, ne permettaient pas d'imbriquer des éléments de bloc dans des éléments en ligne. Ainsi, si vous essayez d'imbriquer un élément div à l'intérieur d'un lien, l'utilisateur ne sera pas en mesure de cliquer sur le lien et d'autres comportements étranges. Les nouveaux navigateurs supportent certaines de ces techniques (par exemple, un lien avec un élément div à l'intérieur pour que tout le bloc soit cliquable). IE11 est en attente. J'ai également rencontré des problèmes avec les SVG et IE11, même en utilisant le SVG comme une image (à travers une balise img et un fichier SVG externe).

Le problème principal est que certains attributs css ne peuvent pas être définis dans les navigateurs plus anciens, comme le witdh, la hauteur et le padding vertical (padding haut et bas). Donc si vous immergez un élément block dans un élément inline, et que l'élément dépasse les dimensions de l'élément inline (héritées de la taille de la police, de la hauteur de la ligne et de l'alignement vertical de l'élément), l'élément inline ne sera pas rendu correctement.

J'espère que cette petite modification vous aidera à comprendre le problème.

Answer 2

Je ne peux pas le tester moi-même pour le moment, mais faites-en l'essai :

svg{
  pointer-events: none
}
svg>rect{
  position: relative;
  pointer-events: auto;
}

Je me réfère à ceci : https://css-tricks.com/almanac/properties/p/pointer-events/#comment-1108851

J'ai édité ma réponse. Pour être honnête, je ne sais pas exactement pourquoi vous souhaitez faire cela. Quelle est l'utilité de désactiver les événements du pointeur sur le svg si vous souhaitez le cliquer ?