onmouseover vol stationnaire en effet SVG lorsque hébergé sur Sharepoint

Question

Pourriez-vous me aider que: Je fichier svg: FILE_SVG exportés depuis Illustrator. La cible désignée pour moi est d'ajouter un effet «hover» (il pourrait s'agir d'un effet Zomm ou d'un changement de couleur), mais à la fin, le fichier sera téléchargé sur le site intranet de l'entreprise qui fonctionne sur Sharepoint. Je l'ai fait avec CSS, mais le modèle interne coupe toute la partie/code css.

Comme je sais qu'il est possible d'en avoir fini avec Javascript ... Cany Vous m'aidez avec cela ou fournir un lien extewrnal pour commencer (pour les amateurs de c). Merci pour toute aide ...

Answer 1

Si votre modèle interne coupe votre CSS personnalisé, alors il va probablement couper votre code JavaScript personnalisé. À ma connaissance, vous ne pouvez pas intégrer des effets hover dans un fichier SVG. Mais si vous avez accès au HTML et CSS ou JavaScript, commencez par le suivant et expérimentez.

Vous devez donc avoir trois fichiers.

1. Votre SVG
2. Votre HTML
3. Votre CSS

dans votre SVG, il va avoir un code bizarre comme:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> 
</svg> 

copie qui dans votre HTML, et ajoutez un identifiant au svg:

<div class="svg-wrapper"> 
    <svg id="mySVG" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
     <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> 
    </svg> 
</div> 

et quelque chose comme ceci dans votre CSS:

#mySVG { 
    width: 200px; 
    height: 300px; 
} 
#mySVG:hover { 
    width: 250px; 
    height: 375px; 
    fill: blue; 
} 

si vous décidez de faire JavaScript au lieu de CSS, il ressemblera à quelque chose comme:

document.getElementById("mySVG").addEventListener("mouseover", function() { 
    event.target.style.fill="blue"; 
}); 

Essayez ce tutoriel pour utiliser SVG: https://css-tricks.com/using-svg/

Essayez ce tutoriel pour les événements hover JavaScript: https://www.w3schools.com/jsref/event_onmouseover.asp

Answer 2

Vous pouvez obtenir des effets de survol en utilisant la fonction d'animation intégrée de SVG. Sharepoint ne supprimera probablement pas cela.

<svg> 
 
    <circle cx="150" cy="75" r="50" fill="red"> 
 
    <set attributeName="fill" to="green" begin="mouseover" end="mouseout"/> 
 
    </circle> 
 
</svg>

Notez que cela ne fonctionnera pas dans IE cependant. Ce qui peut être un problème si vous êtes un grand lieu de travail MS :)