SVGシンボルの原点

Question

特定のコンポジットシェイプを<Symbol>定義に移動して再利用したいとします。これは、SVGコードをより綺麗にするのに役立ち、その形状の実際の構造を全体的に制御します。形状は、所定の中間点に関して対称である。しかし、その後のx/y座標< >ステートメントを使用すると、元の自然の原点ではなく左上の角を参照する必要があります。これは、シェイプのすべての使用法がその合計サイズを認識している必要があることを意味します。左上隅以外の起点でシンボルを配置する方法はありますか？

わかりやすく説明してください。以下の同心円シンボルは、自然界に由来します。ただし、後で使用するステートメントでは、x/y座標をシンボルサイズの半分だけオフセットする必要があります（この例では20,20）。理想的には、シンボルの使用はこの情報を知っている必要はありません。私が正しくあなたの質問を読んでいる場合

<defs> 
    <symbol id="ex"> 
    <circle fill="green" cx="8" cy="8" r="8"/> 
    <circle fill="white" cx="8" cy="8" r="6"/> 
    <circle fill="green" cx="8" cy="8" r="4"/> 
    </symbol> 
</defs> 


<use xlink:href="#ex" x="12" y="12"> 

Answer 1

シンボルの欠点は、それは、ビューポートの境界にレンダリングのカットということです。 （これは、viewBoxを定義することができるため、上にも表示されます）。しかし、それはまったく使用しないでください。 <defs>要素内のすべてが直接描画されていない、あなたが起源に関する<g>とセンターすべてのため<symbol>を交換することができるように：

<defs> 
    <g id="ex"> 
    <circle fill="green" cx="0" cy="0" r="8"/> 
    <circle fill="white" cx="0" cy="0" r="6"/> 
    <circle fill="green" cx="0" cy="0" r="4"/> 
    </g> 
</defs> 

<use xlink:href="#ex" x="12" y="12"> 

http://jsfiddle.net/nuzwn07n/

Answer 2

は、あなたが

<use xlink:href="#ex" x="20" y="20"> 

..andその後、円記号が[20,20]でその中央に位置していると言うことができるようにしたいです。私が提案する解決策では、シンボルのサイズを知る必要がありますが、<symbol>宣言では1回だけで、すべての<use>要素には適用されません。

1：<symbol>には、translateというグループにすべてを入れて、グラフィックスの中央が左上隅にあるようにします。

<symbol id="ex"> 
    <g transform="translate(-8,-8)"> 
     <circle ... 
    </g> 
</symbol> 

2：あなたが今<use>そのシンボル、あなただけのシンボルの「ビューポート」内はまだだ四半期の円が表示されます場合。サークル全体を表示するには、<symbol>にoverflow="visible"を適用するだけです。

<symbol id="ex" overflow="visible"> 
    <g transform="translate(-8,-8)"> 
     <circle ... 
    </g> 
</symbol> 

http://jsfiddle.net/0ghucsrp/