How do I define or reference a variable in SVG?

问题:

Might be you do not need variables for static images but this would be easier to inspect them and see related parts when everything is defined in terms of variables, IMO. It also simplifies update of the images. See how you do the constrains-based engineering drawing in SolidWorks. It basically makes the sizes of one object relative to the size (or another property) of the other. Can I similarly define an integer (width) or set a width of another object by referencing the width of a reference object?

回答1:

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

The library can be obtained from here

回答2:

The simple answer is no.

You can define some things such as gradients, masks, patterns and filters relative to the object they are being applied to. You can also define some elements relative to the size of the parent SVG. However you can't define the shape of one element relative to another element. There is no such thing as variables in SVG.

What you can do is dynamically generate (or modify) an SVG using Javascript.

回答3:

The library referenced by Robert gave me issues, so I wrote a more simple function of my own, which seems to work.

Add this into a .js file and include at the bottom of your SVG, inside the svg tag.

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)
        }

    }
}

Then any tags inside the SVG you want to be affected by the parameter, such as polygons, paths, circles etc, add 'Dynamic' as a class name.

You can then pass parameters through in the querystring of the object source:

<object type="image/svg+xml" data="yourimage.svg?fill=#FF0000"></object>

This can of course be modified so different classes can be referenced if you have different parameters to send in, but for me it works fine as I only require fill changes.