Script de données dans le format SVG (lecture et la modification de)

quelqu'un Peut vraiment m'aider, s'il vous plaît? J'ai cherché des façons d'exécuter des scripts pour mon SVG. Mais toutes les choses que j'ai reçu ne correspond pas! Et il ne contient pas suffisamment d'informations pourquoi il a utilisé cet ensemble de codes. Par exemple, on a utilisé de l'événement.la cible, un autre événement.getTarget(), et qu'un autre événement.cible.firstchild.données. Quelqu'un peut-il m'aider, s'il vous plaît?

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

est-ce qu'un exemple de svg path est correct? Ce que j'ai besoin est d'obtenir ces coordonnées, probablement le mettre dans une variable, et l'utiliser comme coordonnées pour un autre svg. Alors, comment puis-je le faire? Une autre chose est comment je peux changer ces coordonnées en entrant des nombres dans une interface.

alors j'ai essayé de chercher des réponses, mais comme je l'ai dit, Je n'ai pas trouvé l'information dont j'avais besoin ou peut-être que je ne comprenais pas ce qu'elle me montrait.

25
demandé sur Phrogz 2011-11-08 20:11:04
la source

2 ответов

on dirait que vous pouvez avoir quatre questions:

  1. comment intégrer script dans un fichier SVG?
  2. comment exécuter script dans un fichier SVG?
  3. comment accéder aux données pour un <path> élément à partir d'un script?
  4. Comment puis-je manipuler des données pour un <path> élément à partir d'un script?

attaquons-les un à la fois:


comment intégrer script dans un fichier SVG?

Comme décrite dans la spécification SVG vous pouvez placer un <script> élément dans votre document pour contenir le code JavaScript. Selon les dernières spécifications SVG,vous n'avez pas besoin de spécifier un type l'attribut pour votre script. Il sera par défaut à type="application/ecmascript".

  • les autres types mime courants comprennent "text/javascript","text/ecmascript" (spécifié dans le format SVG 1.1), "application/javascript" et "application/x-javascript". Je ne dispose pas d'informations détaillées sur la prise en charge du navigateur pour tous les ces, ou de l'omission d'un type attribut dans l'ensemble. J'ai toujours eu un bon succès avec text/javascript.

comme pour HTML, vous pouvez mettre le code de script directement dans le document, ou vous pouvez faire référence à un fichier externe. Dans ce dernier cas, vous devez utiliser un href l'attribut (pas src) pour L'URI, avec l'attribut xlink espace de noms.

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <script xlink:href="/js/mycode.js" />
  <script><![CDATA[
    // Wrap the script in CDATA since SVG is XML and you want to be able to write
    // for (var i=0; i<10; ++i )
    // instead of having to write
    // for (var i=0; i&lt;10; ++i )
  ]]></script>
</svg>

comment exécuter script à L'intérieur D'une SVG fichier?

comme pour HTML, le code inclus dans votre document SVG sera lancé dès qu'il sera rencontré. Si vous placez votre <script> élément au-dessus du reste de votre document (que vous pourriez lors de la mise en <script> dans le <head> D'un document HTML) alors aucun de vos éléments de document ne sera disponible lorsque votre code sera en cours d'exécution.

la façon La plus simple d'éviter cela est de placer votre <script> éléments au fond de votre document:

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- all SVG content here, above the script -->
  <script><![CDATA[
    // Now I can access the full DOM of my document
  ]]></script>
</svg>

Sinon, vous pouvez créer une fonction de rappel en haut de votre document qui est invoqué lorsque le reste du document est prêt:

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  <title>SVG Coordinates for Embedded XHTML Elements</title>
  <script>document.documentElement.addEventListener('load',function(){
    // This code runs once the 'onload' event fires on the root SVG element
    console.log( document.getElementById('foo') );
  },false)</script>
  <path id="foo" d="M0 0" />
</svg>

comment accéder aux données pour un <path> élément à partir d'un script?

il y a deux façons d'accéder à la plupart des informations sur les éléments dans SVG: vous pouvez accéder à l'attribut en tant que chaîne de caractères par la méthode standard DOM Core de niveau 1 getAttribute(), ou vous pouvez utiliser le SVG DOM des objets et des méthodes. Regardons les deux:

accéder aux données du chemin par getAttribute()

en utilisant getAttribute() renvoie la même chaîne de caractères que vous verriez lorsque vous afficher la source:

<path id="foo" d="M150 0 L75 200 L225 200 Z" />
<script><![CDATA[
  var path = document.getElementById('foo');
  var data = path.getAttribute('d');
  console.log(data);
  //-> "M150 0 L75 200 L225 200 Z"
]]></script>
  • Pros: très simple à appeler; vous n'avez pas besoin de savoir quoi que ce soit sur le SVG DOM
  • Con: puisque vous récupérez une chaîne, vous devez analyser l'attribut vous-même; pour SVG <path> données, ce qui peut être atroce.

Accéder aux données de chemin à travers les méthodes du DOM de SVG

<path id="foo" d="M150 0 L75 200 L225 200 Z" />
<script><![CDATA[
  var path = document.getElementById('foo');

  // http://www.w3.org/TR/SVG/paths.html#__svg__SVGAnimatedPathData__normalizedPathSegList
  // See also path.pathSegList and path.animatedPathSegList and path.animatedNormalizedPathSegList
  var segments = path.normalizedPathSegList ;

  for (var i=0,len=segments.numberOfItems;i<len;++i){
    var pathSeg = segments.getItem(i);
    // http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSeg
    switch(pathSeg.pathSegType){
      case SVGPathSeg.PATHSEG_MOVETO_ABS:
        // http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegMovetoAbs
        console.log("Move to",pathSeg.x,pathSeg.y);
      break;
      case SVGPathSeg.PATHSEG_LINETO_ABS:
        // http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegLinetoAbs
        console.log("Line to",pathSeg.x,pathSeg.y);
      break;
      case SVGPathSeg.PATHSEG_CLOSEPATH:
        // http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegClosePath
        console.log("Close Path");
      break;
    }
  }
]]></script>

Le script ci-dessus produit la sortie suivante:

Move to 150 0
Line to 75 200
Line to 225 200
Close Path
  • Pros: Les données de chemin sont analysées pour vous; vous obtenez des nombres exacts à partir de L'API elle-même; en utilisant normalizedPathSegList prend les commandes relatives et les rend absolues pour vous; si l'animation SMIL change les données de chemin, l'utilisation de la liste de chemin non animée peut vous donner accès à la base, aux informations non animées non disponible via getAttribute().

  • Contre: Sweet chimpunks une flamme, regardez ce code! Et cela ne prend même pas en charge tous les segments de chemin possibles disponibles.

parce qu'il peut être difficile de lire les spécifications W3C pour SVG DOM, il y a de nombreuses années, j'ai créé un outil en ligne pour parcourir les propriétés et les objets qui existent. Vous pouvez l'utiliser ici: http://objjob.phrogz.net/svg/hierarchy


Comment puis-je manipuler des données pour un <path> élément à partir d'un script

similaire à ce qui précède, vous pouvez créer une nouvelle chaîne et utiliser setAttribute() pour le pousser sur l'objet, ou vous pouvez manipuler le SVG DOM.

Manipuler les données de la trajectoire à l'aide de setAttribute()

<path id="foo" d="M150 0 L75 200 L225 200 Z" />
<script><![CDATA[
  var path = document.getElementById('foo');
  path.setAttribute('d','M150,0 L150,100 200,300 Z');
]]></script>

Manipuler les données de la trajectoire à l'aide de DOM SVG

<path id="foo" d="M150,0 L75,200 l150,0 Z" />
<script><![CDATA[
  var path = document.getElementById('foo');
  var segments = path.pathSegList;
  segments.getItem(2).y = -10;
]]></script>

En général, il vous suffit de modifier les propriétés des divers SVGPathSeg sous-classe des situations, les modifications sont apportées immédiatement dans le DOM. (Dans l'exemple ci-dessus, le triangle d'origine est biaisé lorsque le dernier point est légèrement déplacé vers le haut.)

lorsque vous devez créer de nouveaux segments de chemin, vous devez utiliser des méthodes comme var newSegment = myPath.createSVGPathSegArcAbs(100,200,10,10,Math.PI/2,true,false) et ensuite utiliser une des méthodes pour coller ce segment dans la liste, par exemple segments.appendItem(newSegment).

93
répondu Phrogz 2011-11-27 19:21:06
la source

éléments de chemin dynamique en SVG avec support Javascript et Css

var XMAX = 500;
    var YMAX = 500;
    var _xx=10;
    var _reg=100;
    var _l=10;
    // Create PATH element
    for(var x=1;x<20;x++)
    {
    var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
    pathEl.setAttribute('d','M'+_l+' 100 Q 100  300 '+_l+' 500' );
    pathEl.style.stroke = 'rgb('+(_reg)+',0,0)';
    pathEl.style.strokeWidth = '5';
    pathEl.style.fill = 'none';
        $(pathEl).mousemove(function(evt){$(this).css({"strokeWidth":"3","stroke":"#ff7200"}).hide(100).show(500).css({"stroke":"#51c000"})});

    document.querySelector('svg').appendChild(pathEl);
    _l+=50;
    }

Démo en jsfiddle

5
répondu Godly Mathew 2014-03-31 11:02:59
la source

Autres questions sur