How do I define or reference a variable in SVG?

Question

The SVG Parameter Variables Specification would do what you want but it’s unlikely ever to be completed, let alone implemented by UAs. Instead SVG looks like it will move towards attributes being CSS parameters at which point you could use CSS Calc.

There is a light at the end of the tunnel for you though as this specification is already implemented by a javascript shim so if you use that you have a ready made drop in library that does what you want.

The syntax looks like this…

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

or

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

usage looks like this…

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 320">
<script type="text/ecmascript" xlink:href="https://stackoverflow.com/questions/27812161/ref2.js" />
<defs>
    <ref id="paramX" param="x" default="-10"/>
    <ref id="paramY" param="y" default="-10"/>
</defs>

<circle id="coord" cx="url(#paramX)" cy="url(#paramY)" r="5" fill="tan" stroke="brown" stroke-width="3" />

The library can be obtained from here

Leave a Comment Cancel reply