私は2つのdivコンテナを持っています。1つ目は多くの小さなSVG画像を含み、2つ目はクリックしたSVG画像を含むことになっています。
最初のdivのSVG画像の「クリック時」に次のようにします。
- SVG画像のクローンを作成します。
- それ(クローン)を元のサイズの5倍に再スケーリングします。
- 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の幅と高さを増やすたびに、画像は小さくなります。
私は次のような多くの関連する質問を見ました:
そしてもっとたくさんありますが、私はまだ問題を解決できません。私は何を間違っているのですか?