Question

我有一个绘制折线的SVG，如：

<polyline points="500 10 500 20 500 30 500 40 500
    50 500 60 500 70 500 80 500 90 500
    101 500 111 500 121 500 131 500 141 500
    151 500 161 500 171 500 181 500 191 500
    202 500 212 500 222 500 232 500 242 500
    252 500 262 500 272 500 282 500 292 500
    303 500 313 500 323 500 33 ... "/>

我希望避免在属性中指定点，原因如下：

点数可能会非常大（1,000个数字）并且将它们放在属性中会使SVG难以阅读和处理。
这组点在同一个SVG中多次使用，我希望避免为每一行绘制重复点。

我知道对于文本，您可以使用<tref>来引用其他地方定义的文本。这也可以用于积分吗？

Answer 1

您可以使用<use/>（specification）元素：

<defs>
  <polyline points="..." id="foo" />
</defs>
<use xlink:href="#foo" x="100" y="100" stroke="#ff0000" />

但是，普通SVG无法从属性中移动点数据。您必须使用其他一些技术，JavaScript，XSLT或其他预处理或后处理来执行此操作。

编辑：不要在家里尝试这个，小孩，但你可以使用XML实体将点存储在另一个地方：

<!DOCTYPE svg [
 <!ENTITY points "[your points go here]">
]>
<svg>
  <polyline points="&points;" />
</svg>

但是，我强烈反对这种解决方案，因为可以预见的是，处理软件会对此产生影响。我猜浏览器可以很好用（只要它不是HTML5上下文），但其他像Inkscape，Adobe Illustrator，Batik等可能也不会很好。

Answer 2

也许在你的情况下＆lt; path＆gt;会更具可读性和紧凑性吗？ h和v命令（及其绝对对等H和V）会想到您的示例。

Answer 3

我还没有在SVG中听说过这样做的方法。

我会考虑编写一个生成SVG代码的脚本，而不是手动执行此类操作。这样您就可以在SVG中添加更多结构。 SVG实际上是生成的，而不是手工编码。

在你的例子中，你似乎只能做两个循环。

参考SVG中的点数据

3 个答案: