如何在SVG中定义或引用变量？
也许你不需要静态图像的变量，但当一切都定义在变量中时，这将更容易检查它们并查看相关部分，IMO。它还简化了图像的更新。See how you do the constrains-based engineering drawing in SolidWorks。它基本上使一个对象的大小相对于另一个对象的大小(或另一个属性)。我是否可以通过引用引用对象的宽度来类似地定义一个整数(宽度)或设置另一个对象的宽度？
回答 4
Stack Overflow用户
发布于 2015-01-08 13:40:02
The SVG Parameter Variables Specification可以做你想做的事情，但它不太可能完成，更不用说由无人机实现了。相反，SVG看起来更倾向于将属性作为CSS参数，在这一点上，您可以使用CSS Calc。
不过，在隧道的尽头有一丝希望，因为这个规范已经通过javascript填充实现了，所以如果你使用它，你已经有了一个现成的库，它可以做你想做的事情。
语法看起来像这样...
<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" />
<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" />
该库可以在from here上获得
Stack Overflow用户
发布于 2018-05-14 17:29:02
Robert引用的库给了我一些问题，所以我自己写了一个更简单的函数，看起来还不错。
将其添加到.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‘作为类名。
然后，您可以在对象源的querystring中传递参数：
<object type="image/svg+xml" data="yourimage.svg?fill=#FF0000"></object>这当然可以修改，这样如果你有不同的参数要发送，就可以引用不同的类，但对我来说，它工作得很好，因为我只需要填充更改。
Stack Overflow用户
发布于 2015-01-08 08:03:55
答案很简单，不是。
您可以相对于要应用的对象定义一些内容，如渐变、蒙版、图案和滤镜。您还可以定义一些与父SVG的大小相关的元素。但是，您不能定义一个元素相对于另一个元素的形状。SVG中没有变量这样的东西。
您可以做的是使用Javascript动态生成(或修改) SVG。
https://stackoverflow.com/questions/27812161
复制相似问题
腾讯云开发者
