Palette tweet svg html

**bilbe** · 21/11/2017, 13h44

Bonjour,
j'ai une page HTML avec un fichier svg , et je voudrais par ex quand je clique sur un texte , un autre texte s'affiche mais je n'ai aucune idée comment sa marche
( je travaille avec inkscape )

pourriez vous m'aidez s'il vous plait

je vous met le

Code HTML :

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tweet Palette</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
 
<div id='palette'>
</div>
 
<script>
d3.xml("palette2/palet.svg",function(node) { 
        //return true;
                //importe le curseur
                var importedNode = document.importNode(node.documentElement, true);
                d3.select("#palette").node().appendChild(importedNode);   
        
});       
</script>
 
  <circle cx="50" cy="50" r="45" fill="green"
          onclick="change(evt)" />
 
</body>
</html>

**headmax** · 21/11/2017, 22h56

Bonjour, d3.js possède sa propre function append il faudrait l'utiliser.
un petit exemple comment on rajoute un événement click sur un text ou sur un circle et comment celui-ci peux intéragir (changement couleur du cercle, création d'un nouveau text ...etc .

démo :
https://codepen.io/headmax/pen/XzEZKv?editors=1111

**bilbe** · 22/11/2017, 00h40

bonjour,
merci pour ta réponse

je vais etre plus précise
je voudrais un texte , une fois que je clique sur se texte , en bas de la page par ex dans une forme , sa m'affiche un autre texte

merci

**headmax** · 22/11/2017, 09h57

Je comprends pas la précision, loin de vouloir te porter une critique, mais dans le monde du web on a une sémantique, il serait peut être plus adapté de parler de texte provenant d'un svg, d'un text sur une balise dom (p, div, input, ...) ou mettre la page html avec des commentaires ou une image "mon rendu" et ce que j'aimerais pouvoir faire "rendu final".
Pour être plus précis tu as mit dans ta page une balise div est-ce un click sur cette balise div qui contiendrait du texte ou le "circle" svg, comme dans mon exemple j'ai un "circle" dans lequel je créer une balise "text" svg à la volé lors d'un événement "onclick" dans le cercle "circle" svg, sur ce text svg j'attache un événement onclick afin qu'il soit cliquable ce qui est déjà le cas dans cette exemple.

**bilbe** · 22/11/2017, 16h45

je vous met un exemple pour mieux comprendre

Nom : exemple.png
Affichages : 111
Taille : 13,0 Ko

**headmax** · 22/11/2017, 19h38

Salut merci pour ton schéma il manques les noms des balises que tu utilise a moins que tu génère toi même les svg en JS, dans ce type de contexte je ne comprend pas l'intérêt d'utiliser 3d.js

, tu peux faire simplement en intégrant tes éléments svg dans ta page sans trop les générer en js je te montre l'exemple que tu m'a montré :
J'ai volontairement mit plusieurs balise html qui soit attendent un attribut "value" (input, textarea...) ou soit un attribut "textContent" (span, div ...).

Nom : Capture d'écran de 2017-11-22 19-33-15.png
Affichages : 109
Taille : 47,2 Ko

Nom : Capture d'écran de 2017-11-22 19-33-15.png
Affichages : 109
Taille : 47,2 Ko

https://codepen.io/headmax/pen/yPjgPY

Palette tweet svg html

JavaScript

Discussions similaires

Partager

Partager