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

Question

您可能不需要静态图像的变量,但是当根据变量IMO定义所有内容时,这将更容易检查它们并查看相关部分.它还简化了图像的更新.了解如何在SolidWorks中执行基于约束的工程图.它基本上使一个对象的大小相对于另一个对象的大小(或另一个属性).我可以通过引用参考对象的宽度来类似地定义整数(宽度)或设置另一个对象的宽度吗？

Answer 1

SVG参数变量规范可以满足您的需求,但不太可能完成,更不用说由UA实现了.相反,SVG看起来会转向属性为CSS参数,此时你可以使用CSS Calc.

虽然这个规范已经通过javascript shim实现,但是在隧道尽头有一个亮点,所以如果你使用它,那么你就可以在库中实现你想要的功能.

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

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

图书馆可以从这里获得

Answer 2

罗伯特引用的库给了我一些问题，所以我自己编写了一个更简单的函数，这似乎有效。

将其添加到 .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 中您希望受参数影响的任何标签（例如多边形、路径、圆形等）添加“Dynamic”作为类名称。

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

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

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

Answer 3

简单回答是不。

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

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