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

たぶんあなたの場合、<path>はもっと読みやすくコンパクトになりますか？handコマンド（およびそれらのv絶対的な対応物HとV）は、あなたの例を見て頭に浮かびます。

于 2012-10-23T18:56:14.997 に答える
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 に答える
0

SVG でこれを行う方法について聞いたことがありません。

このようなことを手動で行うのではなく、SVG コードを生成するスクリプトを作成することを検討します。このようにして、SVG により多くの構造を組み込むことができます。SVG は、手動でコーディングするのではなく、生成することを意図しています。

あなたの例では、たった2つのループでできるようです。

于 2012-10-23T14:40:44.687 に答える