Question

你可能不需要静态图像的变量，但是当根据变量IMO定义所有内容时，这将更容易检查它们并查看相关部分。它还简化了图像的更新。 See how you do the constrains-based engineering drawing in SolidWorks。它基本上使一个对象的大小相对于另一个对象的大小（或另一个属性）。我可以通过引用参考对象的宽度来类似地定义整数（宽度）或设置另一个对象的宽度吗？

Answer 1

The SVG Parameter Variables Specification会做你想做的事，但它不太可能完成，更不用说由UAs实施了。相反，SVG看起来会转向属性为CSS参数，此时你可以使用CSS Calc。

隧道尽头有一盏明灯，因为这个规范已经由一个javascript shim实现了，所以如果你使用它，你就可以在库里做一个现成的drop来做你想要的。

语法如下所示......

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

或

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

用法看起来像这样......

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

可以获取图书馆from here

Answer 2

简单的答案是否定的。

您可以定义一些内容，例如相对于要应用的对象的渐变，蒙版，图案和滤镜。您还可以定义一些与父SVG大小相关的元素。但是，您无法定义一个元素相对于另一个元素的形状。 SVG中没有变量这样的东西。

您可以做的是使用Javascript动态生成（或修改）SVG。

Answer 3

罗伯特引用的图书馆给了我一些问题，所以我写了一个更简单的函数，这似乎有用。

将其添加到.js文件中并包含在SVG底部的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)
        }

    }
}

然后，您希望受参数影响的SVG中的任何标签，例如多边形，路径，圆圈等，添加“动态”＃39;作为班级名称。

然后，您可以在对象源的查询字符串中传递参数：

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

当然可以修改这个，这样如果你有不同的参数要发送，可以引用不同的类，但对我来说它工作正常，因为我只需要填充更改。

如何在SVG中定义或引用变量？

3 个答案: