3

私は2つのdivコンテナを持っています。1つ目は多くの小さなSVG画像を含み、2つ目はクリックしたSVG画像を含むことになっています。

最初のdivのSVG画像の「クリック時」に次のようにします。

  1. SVG画像のクローンを作成します。
  2. それ（クローン）を元のサイズの5倍に再スケーリングします。
  3. 2番目のdivコンテナで表示します。

私はいくつかの調査を行い、viewBoxを使用してSVG画像のスケーリングとサイズ設定を制御できることを発見しました。そこで、viewBox属性を設定します。小さなsvgは次のようになります。

            var small svg = div.append("svg:svg")               
                .attr("class", "thumbnail")
                .attr("width", w)
                .attr("height", h)  
                .attr("viewBox", "0 0 " + w + " " + h)
                .attr("preserveAspectRatio", "none")

                .on("click", function(){
                            var projectedGraph = this.cloneNode(true);


            IncreaseSize(projectedGraph);

            });

ここで、「IncreaseSize」メソッドで次のことを行いました。

            projectedGraph.setAttribute("class", "main")
            projectedGraph.setAttribute("width", w*5)
            projectedGraph.setAttribute("height", h*5)
            projectedGraph.setAttribute("viewBox", "0 0 " + (w*5) + " " + (h*5))


            $mainContent.append(projectedGraph); // append to second Div

ただし、サイズは（視覚的に）同じままです。「Chrome」の「要素」を検査するとき。パラメータが設定されます。私は値を微調整して問題を理解しようとかなりの時間を費やしました。svgの幅と高さをリセットせずに、projectedGraphのviewBoxの幅と高さを増やすたびに、画像は小さくなります。

私は次のような多くの関連する質問を見ました：

そしてもっとたくさんありますが、私はまだ問題を解決できません。私は何を間違っているのですか？

4

2 に答える 2

1

幅と高さの属性は、SVG図面が占める領域の大きさを制御します。viewBoxは、表示するコンテンツを制御します。両方を増やすと、他の方法では見えない（描画領域の外側）ものが多く表示されますが、各形状は同じサイズになります。

シェイプを大きくしたい場合、つまりズームのような効果が必要な場合は、viewBoxを変更しないでください。

于 2012-12-11T19:06:00.423 に答える
0

別のスケールで表示したいだけの場合は、svgのクローンを作成する必要がないことをご存知ですか？

これが例です。

ネストされた<svg>要素があり、その中に<use>要素があり、別のスケールで表示する必要があるsvgにリンクしています。

<svg id="mainsvg">
  <g id="map">
    ...
      your unscaled svg here
    ...
  </g>

  <svg id="miniview" viewBox="340 502 100 100" 
   width="200" height="200" x="400" y="60" overflow="hidden">
    <use xlink:href="#map" width="100%" height="100%"/>
  </svg>
</svg>
于 2012-12-12T12:17:56.753 に答える