Scalable Vector Graphics (SVG) est un format graphique vectoriel bidimensionnel basé sur XML qui peut également être utilisé en HTML. N'ajoutez pas cette balise simplement parce que votre projet utilise SVG. Au lieu de cela, ajoutez la balise si votre question concerne SVG ou est étroitement liée à celle-ci, comme comment réaliser quelque chose avec SVG.

svg...

J'essaie d'avoir quatre formes superposées comme dans l'image 1. Je veux qu'elles changent de couleur en survolant. Le problème avec les png était qu'ils sont en fait carrés, donc ils changeraient de couleur également dans les zones transparentes, alors je me suis tourné vers SVG. Maintenant, ils ne....
18 mai 2020 à 00:07
Je crée un wavy header sur mon site Web, j'essayais de le faire ressembler à ceci. Mais à la place, je l'ai eu sur mon site Web. J'ai essayé de changer le className mais cela ne fonctionne toujours pas, voici mon code: App.js: function App() { return ( <div className="App"> <div className=....
16 mai 2020 à 10:03
Voici un exemple où j'utilise la méthode element.appendChild() puis je continue comme si l'élément avait été ajouté de manière synchrone. Mais comme le montrent les journaux, ce n'est pas le cas. Au moins tous les calculs du navigateur liés à son rendu ne sont pas terminés. Comment puis-je attendre ....
13 mai 2020 à 15:16
Existe-t-il un moyen efficace de trouver les coordonnées [x, y] de chaque point dans un à l'intérieur d'un chemin sans vérifier manuellement chaque point sur l'ensemble du canevas en utilisant context.isPointInPath()? Exemple de chemin à partir d'un geojson <path d=" M 588, 173, L 588, 176, L 5....
11 mai 2020 à 00:02
Je veux dessiner un plan d'étage 2D sur une page html. J'ai un ensemble de données qui ressemble à ci-dessous. Ensemble de données { floor:{ "id" : 2, rooms:[ { "id" : 21, "x" : 0.0, "y" : 0.0, "height" : 15, "weight" : 20 } ....
5 mai 2020 à 02:47
Je veux placer la FAQ pour être au-dessus de ce SVG vague grise. Comme dans, les "Questions Fréquemment Posées" seraient au-dessus du SVG et l'autre texte serait toujours juste en dessous (comme s'il y avait une boîte autour de la question FAQ, je veux juste le déplacer vers le haut). Y-a-t-il un mo....
4 mai 2020 à 05:30
J'ai une carte d'un pays (SVG) et je veux mettre en évidence une province / un état lorsque je survole, en changeant sa couleur / son remplissage. J'ai implémenté cela, mais le problème est que onMouseEnter met en évidence la carte entière et pas seulement l'état que j'ai sélectionné. Ce que je veux....
3 mai 2020 à 03:30
Je me demande s'il existe un moyen d'utiliser du HTML en ligne comme les éléments <sup> et <sub> en SVG? Par exemple: <svg> <text x="0" y="12">Some text with a superscript <sup>1</sup> and a subscript <sub>2</sub>.</text> </svg> Je ne trouve rien sur l'utilisation d'éléments HTML en ligne dans SV....
20 avril 2020 à 18:14
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <g class="check-box"> <path class="vector" d="M16 0C7.17725 0 0 7.17725 0 16C0 24.8228 7.17725 32 16 32C24.8228 32 32 24.8228 32 16C32 7.17725 24.8228 0 16 0Z" fill="#e8e8e8" /> <path class....
13 avril 2020 à 02:38
J'ai créé le logo instagram dans Illustrator et j'ai extrait le code généré et je veux transformer ce code en composant React. code SVG brut <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" styl....
11 avril 2020 à 13:46
Je veux obtenir l'id de l'élément svg (texte) qui a été survolé. Le HTML: <svg class="compass-svg" width="200" height="200"> <text id="textN" x="93" y="55" fill="#000">N</text> <text id="textE" x="145" y="105" fill="#000">O</text> <text id="textS" x="95" y="158" fill="#000">S</text> ....
30 mars 2020 à 20:01
Je veux changer la couleur de chaque polygone du svg en survol en utilisant css. Voici le code html: <svg class="compass-svg" width="200" height="200"> <polygon id="N" points="100,10 125,50 100,100 75,50" style="fill:#fff; stroke:#000; stroke-width: 1;"/> <polygon id="NE" points="155,45 15....
30 mars 2020 à 18:26
Actuellement, j'apprends Javascript. Ce que j'essaie, c'est de faire une carte cliquable de l'Allemagne affichant les données. Tout comme this. Amchart fournit une carte de l'Allemagne. Mais cela ne ressemble pas à celui ci-dessus. J'ai des données sur l'Allemagne et je souhaite les afficher en fonc....
25 mars 2020 à 19:09
J'essaie de résoudre un problème très simple: deux éléments; un bouton et un rectangle. Lorsque vous survolez le bouton, le rectangle change de couleur de remplissage. J'ai essayé CSS, mais pour une raison quelconque, je ne peux pas faire fonctionner le ' className : hover targetClass {}'. Le corp....
18 mars 2020 à 16:04
J'y travaille pour avoir le droit de changer les couleurs. Chaque rect changera avec un retard de 0,1 s. Disons que je veux avoir plus de rectangles ou de chemin, comment puis-je simplifier le code? Je pense que cela pourrait être simplifié en utilisant scss mais qu'en est-il de l'utilisation de css....
4 mars 2020 à 14:05
Comment puis-je dessiner un rectangle arrondi en pointillés sans couper? Mon cas: .button{ position: relative; background: #CE3900; padding: 10px 20px; display: inline-block; border-radius: 30px; color: #FC961E; } .button:after{ content: ''; position: absolute; top: ....
2 mars 2020 à 12:46
Attention je suis un débutant en codage. J'ai essayé de créer un portefeuille de type site Web pour pratiquer mon codage avec html et css, je voulais utiliser 2 svg en bas de la page mais j'ai rencontré un problème. Chaque fois que j'utilise position: relative; sur les deux svg, ils n'apparaissent p....
2 mars 2020 à 12:31
Qui est correct? <svg width="100px" height="200px"> ... </svg> Ou ca <svg width="100" height="200"> ... </svg> Je sais qu'en cas de tag <img> nous ne devons pas spécifier le px, car si je valide contre W3C Je reçois un message d'erreur: Mauvaise valeur 100 px pour la hauteur d'attribut su....
25 févr. 2020 à 14:39
Il est important pour le client que je mélange à la fois le dégradé et le motif à appliquer sur le même chemin ... est-ce possible? Le schéma est le suivant: <svg id="svg" viewBox="0 0 1000 1000"> <defs> <linearGradient id="grad" x1="7%" y1="0%" x2="93%" y2="100%" > <sto....
svg
24 févr. 2020 à 19:42
J'ai un tableau avec des variables. Je voudrais pousser quelques coordonnées x et y dans le tableau, mais quand j'essaie de pousser au lieu de changer les valeurs des variables, le push crée de nouvelles variables et attribue la valeur à celles-ci. Donc ça ressemble à ça 0: {id: "t523470", name: "tP....
13 févr. 2020 à 14:56
J'ai une animation de transition que je veux déclencher sur la largeur d'un élément SVG à l'intérieur d'un élément de groupe. L'animation ne semble fonctionner que sur le navigateur Chrome. <!-- works --> <svg width="400" height="100"> <rect id="rect-1" width="400" height="100" style="fill:rgb(0,0....
5 févr. 2020 à 17:48
Je sais que vous utiliseriez généralement le théorème de Pythagore pour obtenir la distance entre les points, mais un cercle n'a pas de x1 et x2. Voici un exemple. Sans ces valeurs, comment puis-je calculer les distances? circle { fill: orange; } <svg transform="translate(0, 22)"> <circle c....
3 févr. 2020 à 18:28
J'ai un fichier SVG. J'essaie de me débarrasser de certains éléments qui contiennent du texte spécifique: <g style="font-family:'ARIAL'; stroke:none; fill:rgb(127,0,0);" > <g font-size="53.4132" > <text id="cv_126" x="168" y="474.78" transform="rotate(330 168 474.78) translate(168 -474.78) scale(1 1....
3 févr. 2020 à 17:48
J'essaie d'avoir le contour-remplissage tracer le contour gris en survol, et l'inverse se produit lorsque la souris s'éloigne. Pour une raison quelconque, la méthode que j'utilise maintenant ne fonctionne sur aucun navigateur. Quelqu'un a des idées? HTML avec le fichier SVG en ligne Fichier CSS sépa....
31 janv. 2020 à 00:29
J'ai d'énormes maux de tête en essayant de régler le point idéal pour obtenir une animation de forme "8" en utilisant la combinaison de seulement <animate attributeName="cx"> et <attributeName="cy">. J'aimerai le faire en utilisant cela car il semble, d'après mes métriques, que c'est le plus perf....
16 janv. 2020 à 17:19