Come si definisce o si fa riferimento a una variabile in SVG?

Question

Potrebbe essere che non sono necessarie le variabili per le immagini statiche, ma sarebbe più semplice controllarle e vedere le parti correlate quando tutto è definito in termini di variabili, IMO. Semplifica anche l'aggiornamento delle immagini. See how you do the constrains-based engineering drawing in SolidWorks. Rende fondamentalmente le dimensioni di un oggetto rispetto alla dimensione (o un'altra proprietà) dell'altro. Posso definire in modo simile un numero intero (larghezza) o impostare una larghezza di un altro oggetto facendo riferimento alla larghezza di un oggetto di riferimento?

Answer 1

La semplice risposta è no.

È possibile definire alcune cose come gradienti, maschere, motivi e filtri relativi all'oggetto a cui vengono applicati. È inoltre possibile definire alcuni elementi relativi alla dimensione del file SVG principale. Tuttavia non è possibile definire la forma di un elemento rispetto a un altro elemento. Non esistono variabili in SVG.

Quello che puoi fare è generare (o modificare) dinamicamente un SVG usando Javascript.

Answer 2

The SVG Parameter Variables Specification farebbe quello che vuoi ma è improbabile che sia mai completato, per non dire implementato dagli UA. Invece SVG sembra che si muoverà verso gli attributi essendo parametri CSS, a quel punto si potrebbe usare CSS Calc.

C'è una luce alla fine del tunnel per voi anche se questa specifica è già implementata da uno shim javascript, quindi se si usa si ha una goccia già pronta nella libreria che fa ciò che si desidera.

La sintassi simile a questa ...

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

o

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

utilizzo simile a questa ...

<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 libreria può essere ottenuto from here