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

Question

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

Answer 1

The SVG Parameter Variables Specification会做你想做的事，但它永远不可能完成，更不用说由 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" />
<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