Articles of svg

Comment exporter PNG dans SVG

J'ai du mal à exporter mon SVG qui contient une image PNG. J'utilise D3JS et le code suivant. mysvg.append("image") .attr("width", 299) .attr("height", 168) .attr("xlink:href", "image.png") var html = d3.select("svg") .attr("version", 1.1) .attr("xmlns", "http://www.w3.org/2000/svg") .node().parentNode.innerHTML; var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html); var img = '<img src="'+imgsrc+'">'; d3.select("#chartRender").html(img); Il semble qu'une erreur se produise: le Namespace prefix xlink […]

D3.event est nul dans la fonction de débarquement

Lorsque vous essayez d'utiliser une version dévoilée d'un gestionnaire d'événements d3.event , d3.event est null . J'aimerais utiliser l'objet d3.mouse dans ce gestionnaire d3.event , mais d3.event renvoie null et lance une erreur. Comment puis-je avoir accès à d3.event dans le code suivant: // a simple debounce function function debounce(func, wait, immediate) { var timeout; […]

D3 Empêchez le double clic Zoom

J'ai un D3 Network Graph et j'essaie de désactiver la fonction Double Click zoom. Je l'ai zoomé en utilisant: var zoom = d3.behavior.zoom().scaleExtent([minZoom, maxZoom]); zoom.on("zoom", function() { g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); }); svg.call(zoom) Cependant, je ne peux pas pouvoir désactiver le zoom double clic. Lorsque j'utilise le code ci-dessous, […]

Comment transformer un élément de chemin SVG en un autre sur une commande de clic?

J'essaie de faire un bouton de lecture et d'arrêt. Je ne sais pas comment morpher la forme du triangle (c'est un chemin) dans la forme carrée (c'est un chemin) quand il a été cliqué. Ne montre qu'une seule forme à la fois. Quelqu'un peut-il aider? <svg class="playStop" 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 […]

Numéro IE11 affichant le texte svg avec d3

J'ai un problème étrange avec IE11. J'ai un diagramme à bulles réalisé avec d3 et avec certaines transitions. Les bulles sont définies comme suit: <svg> <g…> <circle …> <text> <image> <path> <line> <text> </g> </svg> Exactement comme: <g class="main-dimension" id="dimension-76" indicator="76" name="Security Alerts" pos-x="184" pos-y="216" original-r="176" transform="translate(184,216)"> <circle class="main-dimension-circle start" r="176"></circle> <text class="main-dimension-title" dy="-74.8" style="font-size: […]

Remplacez un élément SVG par un autre sur le clic

Bonjour, j'essaie de créer du contenu interactif à partir d'images inkscape au format SVG. Je charge un fichier SVG à travers, svg.load à partir de http://keith-wood.name/js/jquery.svg.js Je souhaite ajouter un auditeur onclick au svg chargé, afin que je puisse charger un SVG différent une fois qu'il est cliqué. Comment puis-je faire cela? L'approche dans le […]

SVG et Javascript – Création d'un SVGPoint – TypeError: constructeur illégal

J'essaie de créer un polygone SVG avec Javascript. Lorsque j'essaie de créer un SVGPoint avec ce code Javascript: var p = new SVGPoint(); Je reçois le message suivant: – TypeError: constructeur illégal

SVG – comment définir la ligne de texte

Il semble que la hauteur de ligne soit la propriété CSS absente du texte svg. La meilleure ressource sur SVG que j'ai trouvé est: Jenkov.com SVG Tutorials et il n'y a aucune mention, je ne pourrais pas non plus le mentionner sur MDN . Donc, si quelqu'un peut faire preuve de lumière définitive sur cette […]

Dessiner plusieurs liens entre des nœuds fixes

J'ai un graphe dirigé par force avec des liens entre chaque noeud. Maintenant, certaines paires de nœuds ont plusieurs liaisons entre elles. J'ai trouvé cet exemple: Dessiner plusieurs bords entre deux noeuds avec d3 . Cela a bien fonctionné, pensai-je. Mais si vous avez des nœuds fixés et faites glisser, les chemins finissent par se […]

Animer l'élément SVG toutes les x secondes

introduction Je connais quelques techniques d'animation de base pour SVG utilisant l'élément Javascript et DOM <animate> . J'ai donc créé ce SVG, mais je ne peux pas comprendre comment déclencher l'animation toutes les x secondes sans trop de code. J'ai essayé de begin="4s" mais cela n'attend que la première fois. Question: Il existe une propriété […]