1

ブラウザを特定の形状の中央に配置する (「id」属性による) ブラウザに依存しない方法はありますか?

次のような形状にラップされた xlinks を使用してみました。

<a xlink:href="#node24"> .... </a>

私はかなり忙しい（100以上の形状）有向グラフ図（ドットから生成された）を持っています：そしてそれらをChromeにロードすると、多くの場合、最初の画面は空白になります-ユーザーはスクロールバーを使用して図を見つける必要があります全て。

4

2 に答える 2

1

残念ながら、あなたに良いニュースはありません。

スタンドアロンの SVG ドキュメントの場合、<view>要素にリンクすることで、リンクをたどったときに表示される SVG の一部を操作できます(SVG の「viewBox」属性とは異なりますが、これを利用します)。view 要素は、使用する viewBox と、場合によってはその他のパラメーターを指定します。グラフィックは、デフォルトのパラメーターではなく、これらのパラメーターを使用して表示されます。

コード例:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 100 100" 
    preserveAspectRatio="xMidYMin meet" >

   <circle cx ="50" r="40"/>

   <view id="panUp" viewBox="0 -50 100 100" />

   <view id="zoomIn" viewBox="25 25 50 50" />

</svg>

ファイル全体にリンクすると、画面の上部に半円が中央に配置された画像が表示されます。

ただし、 のようにリンクするとhttp://example.com/sample.svg#panUp、円は同じサイズになりますが、画面の中央に配置されます。にリンクするとhttp://example.com/sample.svg#zoomIn、2 倍の大きさの円の下端だけが表示されます。

(生の SVG ファイルを提供できるファイルをホストする場所はありませんが、この CodePenはデータ URI を使用して効果を表示しますが、データ URI フラグメント識別子は Firefox では機能しないようです。)

目的の viewBox、transforms、またはその他の属性を URL フラグメントの一部として指定することもできるはずですが(のようにhttp://example.com/sample.svg#myView(viewBox(0,0,200,200)))、広く実装されているとは思いません。Firefox にも Chrome にも影響しませんでした。

また、SVG が HTML ドキュメント内に埋め込まれている場合、フラグメントでさえ<view>機能しないようです。そのため、SVG がスタンドアロンでない限り、要素ごとにビュー (またはクリックされた要素に合わせて動的に変化するビュー) を作成することは、面倒なことにはなりません。

では、何が機能するのでしょうか?

ではないフラグメント (要素 ID) にリンクするときのデフォルトの動作は、その要素を含む<view>最も近い祖先要素を表示する<svg>ことです (SVG にはネストされた<svg>タグを含めることができるため、「最も近い祖先」)。したがって、ドキュメントに自然な構造がある場合は、一部の<g>要素を<svg>指定された x、y、高さ、および幅のパラメーターに置き換えてから、そのサブグラフィック内の要素にリンクすると、そのビューが表示されます。これは、SVG がより大きな HTML ドキュメント内に埋め込まれている場合でも機能するはずです。しかし、何百もの要素が動き回っている場合、それはおそらく実用的な解決策ではありません。

これにより、メインのSVGビューボックスをプログラムで操作する@Ianのソリューションが残ります。拡大したくない場合は、パンして、幅と高さをビジュアライゼーションのフル サイズのままにし、x と y のオフセットを変更します。何かのようなもの：

function centerViewOnElement( el ) {
    var bbox = el.getBBox()
    var elCenterX = bbox.x + bbox.width/2, 
        elCenterY = bbox.y + bbox.height/2;

    svg.setAttribute("viewBox", [(elCenterX - width/2),
                                 (elCenterY - height/2),
                                 width,
                                 height
                                ].join(" ")  );
    //assuming you've got the svg, width and height already saved in variables...
}
于 2014-03-09T05:35:48.210 に答える