Articles of svg

Réglage css d'axe dans d3.js

Est-ce qu'il est loin de faire .axis path {fill: none} in d3.js? J'ai essayé .attr et .style sur .call (d3.svg.axis () mais en vain. Je fais juste quelque chose de mal ici … Le code complet que j'utilise pour créer mes axes est le suivant: // create Axis svg.selectAll("axis") .data(d3.range(angle.domain()[1])) .enter().append("g") .attr("class", "axis") .attr("transform", function(d) […]

Cliquez sur le gestionnaire sur l'élément <svg>

Il semble que l'utilisation d'un élément <svg:svg> </svg:svg> ne produit rien dans Safari ou Chrome, mais l'utilisation de <svg> </svg> fonctionne bien. Cependant, l'ajout d'un onclick fonctionne uniquement sur les éléments <svg:svg> . Quelle est la manière appropriée de le faire? Ce jsfiddle démontre le problème (comparez Safari / Chrome à Firefox).

Dessiner un rectangle avec un clic de souris et faire glisser – javascript

J'essayais de dessiner un rectangle (en fait une boîte de sélection) en Javascript, pour sélectionner les éléments SVG qui entrent dans la sélection. J'ai essayé de corriger le code pour le clic et de glisser le rectangle: http://jsfiddle.net/7uNfW/26/ mais il y a un problème que je ne peux pas comprendre dans la function handleMouseDown(e) et […]

Javascript: Trouvez un point sur une ligne perpendiculaire toujours à la même distance

J'essaie de trouver un point à distance égale au milieu d'une ligne perpendiculaire. Je veux utiliser ce point pour créer une courbe de Bézier en utilisant les points de début et de fin, et cet autre point que j'essaye de trouver. J'ai calculé la ligne perpendiculaire, et je peux tracer des points sur cette ligne, […]

Comment zoomer / sortir d3.time.scale sans mise à l'échelle d'autres formes liées à la chronologie

Http://jsfiddle.net/HF57g/ est un exemple d'un seul événement (bleu rect) placé sur la timeline. Si je fais un zoom sur la ligne de temps, le placement de droite sur l'axe x change en harmonie avec les tiques sur l'axe. Mais en même temps, le rect est mis à l'échelle horizontalement. Si je modifie la section suivante […]

Dessin svg: cercle sur d3.svg.area (). Interpoler ("base")

Voici mon code sur JsFiddle J'utilise d3.svg.area() pour dessiner une zone et dessiner les points sous svg:circle dessus. Si vous changez .interpolate('basis') à .interpolate('cardinal') ou linear Mais comment mettre les points correctement avec une interpolation de basis ? Par exemple, je veux mettre les points de near match

Phantomjs créant une sortie noire de SVG à l'aide de page.render

J'ai fonctionné PhantomJS 1.9.6 heureusement sur un serveur Linux clé en main depuis environ 4 mois maintenant. Son but est de prendre un fichier SVG et de créer différentes tailles à l'aide de la fonction page.render. Cela a été fait mais depuis il y a quelques jours, il a commencé à générer une sortie mono […]

Comment animer une ligne pour suivre un élément CSS en mouvement?

MISE À JOUR – J'avais demandé de l'aide pour réparer ma première tentative à l'aide du plugin animé SVG, qui contient maintenant une solution (suivre ce lien) qui répond effectivement à cette question. Bien que attr (), comme Jleagle l'a souligné, pourrait également conduire à une solution J'ai animé une série d'éléments css en utilisant […]

Comment utiliser correctement les chemins d'images SVG complexes dans Google Maps

J'ai créé une petite page Google Maps qui affiche la direction d'un point prédéfini (pour l'instant). Cela peut être trouvé ici Dans cet exemple, j'utilise une icône de flèche par défaut à partir de l'API Google Maps: icon: { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, scale: 6, rotation: heading } Cependant, j'ai ma propre image SVG personnalisée (exportée depuis […]

Comment déplacer un SVG autour d'une page Web sans déclencher de redessinages lents?

J'utilise d3.js pour dessiner un graphique (multi) de ligne (avec quelques points de données, 1600 pour être exact) sur un élément svg. Ce graphique se trouve dans un conteneur qui a une transition sur celui-ci. Sur un certain événement, le conteneur est déplacé de 400px vers le haut avec une transition CSS3 qui fonctionne bien […]