使用ViewBox在瀏覽器中調整SVG對象的大小問題

我有兩個div容器。第一個包含許多小的SVG圖像，第二個包含您點擊的SVG圖像。使用ViewBox在瀏覽器中調整SVG對象的大小問題

「在點擊」任何在第一個div的SVG圖像，我想：

克隆SVG圖像。
將其重新縮放至其原始大小的5倍。
在第二個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

但大小保持不變（視覺）。當我'檢查元素'在'鉻'。參數已設置。我花了很多時間調整值並試圖理解問題，並且每次增加'投影圖的viewBox寬度和高度，而不重新設置svg的寬度和高度，圖像變小

我看到許多相關這樣的問題：

等等，但我仍然無法解決這個問題。請問我做錯了什麼？

來源

2012-12-11 Riyanat

寬度和高度屬性控制SVG圖形佔用的區域的大小。 viewBox控制你看到的內容。如果你增加它們兩個，那麼你會看到更多的東西，否則將不可見（繪圖區域外），但每個形狀將是相同的大小。

如果希望形狀變大，即變焦效果那麼不要更改視圖框。

來源

2012-12-11 19:06:00

謝謝，完美的工作！ – Riyanat

你知道你不需要克隆svg，如果你只是想以不同的規模查看它，對嗎？

這是example。

它有一個嵌套的< 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-12 12:17:56

使用ViewBox在瀏覽器中調整SVG對象的大小問題

回答

相關問題