Comment puis-je définir ou référencer une variable en SVG?

Peut-être vous n'avez pas besoin de variables pour les images statiques, mais ce serait plus facile de les inspecter et voir les pièces, quand tout est défini en termes de variables, de l'OMI. Il simplifie également la mise à jour des images. Voir comment vous faites les contraintes dessin technique dans SolidWorks. Essentiellement, il fait la taille d'un objet par rapport à la taille (ou d'un autre bien) de l'autre. Je peux même définir un entier (largeur) ou de l'ensemble d'une largeur d'un autre objet en référence à la largeur d'un objet de référence?

OriginalL'auteur | 2015-01-07

13

Le SVG Variables de Paramètre de Spécification permettrait de faire ce que vous voulez, mais il est peu susceptible d'être achevé, encore moins de mise en œuvre de la Samu. Au lieu de cela SVG dirait qu'il va se déplacer vers d'attributs CSS paramètres à quel point vous pouvez utiliser CSS Calc.

Il y a une lumière au bout du tunnel pour vous si, comme cette spécification est déjà mis en œuvre par un javascript cale donc, si vous utilisez que vous avez un prêt à déposer dans la bibliothèque qui fait ce que vous voulez.

La syntaxe ressemble à ceci...
```
<object type="image/svg+xml" data="map.svg">
  <param name="x" value="125" />
  <param name="y" value="108" />
</object>
```
ou
```
<object type="image/svg+xml" data="map.svg?y=103&x=523">
</object>
```
utilisation ressemble à...
```
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 320">
<script type="text/ecmascript" xlink:href="ref2.js" />

<ref id="paramX" param="x" default="-10"/>
<ref id="paramY" param="y" default="-10"/>

<circle id="coord" cx="url(#paramX)" cy="url(#paramY)" r="5" fill="tan" stroke="brown" stroke-width="3" />
```
La bibliothèque peuvent être obtenus à partir d'ici

Malheureusement, le SVG Variables de Paramètre de Spécification ne semble pas être inclus dans le SVG 2 spec: w3.org/TR/SVG2

OriginalL'auteur Robert Longson
2

La réponse simple est non.

Vous pouvez définir un certain nombre de choses telles que des dégradés, des masques, des motifs et des filtres par rapport à l'objet auquel ils sont appliqués. Vous pouvez également définir certains éléments par rapport à la taille de la mère SVG. Cependant, vous ne pouvez pas définir la forme d'un élément par rapport à un autre élément. Il n'y a pas une telle chose comme des variables dans le SVG.

Ce que vous pouvez faire est de générer dynamiquement (ou modifier) une SVG à l'aide de Javascript.

OriginalL'auteur Paul LeBeau
0

La bibliothèque référencé par Robert m'a donné des problèmes, alors j'ai écrit plus simple de la fonction de ma propre, qui semble fonctionner.

Ajouter ce dans une .fichier js et de les inclure dans le bas de votre SVG, à l'intérieur de la balise svg.
```
var svgns = "http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink";

GetParams();

function GetParams()
{
    var sParams = document.defaultView.location.href.split("?")[1].split("&");
    var oObjects = document.getElementsByClassName('Dynamic');


    for (i = 0; i < sParams.length; i++) {

        var sName = sParams[i].split('=')[0]
        var sValue = sParams[i].split('=')[1]

        for (j = 0; j < oObjects.length; j++) {
            oObjects[j].setAttribute(sName, sValue)
        }

    }
}
```
Puis toutes les balises à l'intérieur du SVG vous voulez être affectée par le paramètre, tels que des polygones, des chemins, des cercles, etc, ajouter "Dynamique" comme un nom de classe.

Ensuite, vous pouvez passer des paramètres par le biais de la chaîne de requête de l'objet source:
```
<object type="image/svg+xml" data="yourimage.svg?fill=#FF0000"></object>
```
Cela peut bien sûr être modifié de façon différentes classes peuvent être référencé si vous avez de différents paramètres à envoyer, mais pour moi, il fonctionne très bien que je n'ai besoin que de remplir des changements.

OriginalL'auteur Benjo

Vous devez vous connecter pour publier un commentaire.