1

我有绘制折线的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. 点的数量可能会变得非常大（1,000 个数字），并且将它们放在属性中会使 SVG 难以阅读和处理。

  2. 这组点在同一个 SVG 中多次使用，我想避免为每条绘制的线重复它。

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

4

3 回答 3

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 等可能不会很好地发挥作用。

于 2012-10-23T14:38:25.273 回答
1

也许在您的情况下， <path> 会更具可读性和紧凑性？看到你的例子，我想到了handv命令（以及它们的绝对对应物Hand ）。V

于 2012-10-23T18:56:14.997 回答
0

我还没有听说过在 SVG 中执行此操作的方法。

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

似乎您可以在示例中只使用两个循环。

于 2012-10-23T14:40:44.687 回答