Wie definiere oder referenziere ich eine Variable in SVG?

Question

Vielleicht brauchen Sie keine Variablen für statische Bilder, aber dies wäre einfacher zu überprüfen und sehen Sie verwandte Teile, wenn alles in Bezug auf Variablen, IMO definiert ist. Es vereinfacht auch die Aktualisierung der Bilder. See how you do the constrains-based engineering drawing in SolidWorks. Es macht im Grunde die Größen eines Objekts relativ zu der Größe (oder einer anderen Eigenschaft) des anderen. Kann ich auf ähnliche Weise eine Ganzzahl (Breite) definieren oder die Breite eines anderen Objekts festlegen, indem ich die Breite eines Referenzobjekts referenziere?

Answer 1

Die einfache Antwort ist nein.

Sie können einige Dinge wie Verläufe, Masken, Muster und Filter relativ zu dem Objekt definieren, auf das sie angewendet werden. Sie können auch einige Elemente relativ zur Größe des übergeordneten SVG definieren. Sie können jedoch nicht die Form eines Elements relativ zu einem anderen Element definieren. Es gibt keine Variablen in SVG.

Was Sie tun können, ist dynamisch generieren (oder ändern) ein SVG mit Javascript.

Answer 2

The SVG Parameter Variables Specification würde tun, was Sie wollen, aber es ist wahrscheinlich nie abgeschlossen, geschweige denn von UAs implementiert. Stattdessen sieht SVG so aus, als würde es sich zu Attributen bewegen, die CSS-Parameter sind. An diesem Punkt können Sie CSS Calc verwenden.

Es gibt ein Licht am Ende des Tunnels für Sie, obwohl diese Spezifikation bereits durch ein Javascript-Shim implementiert ist, so dass Sie eine fertige Drop-in-Bibliothek haben, die tut, was Sie wollen.

Die Syntax sieht wie folgt aus ...

<object type="image/svg+xml" data="map.svg"> 
    <param name="x" value="125" /> 
    <param name="y" value="108" /> 
</object> 

oder

<object type="image/svg+xml" data="map.svg?y=103&x=523"> 
</object> 

Nutzung wie folgt aussieht ...

<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" /> 

Die Bibliothek erhalten werden kann from here