是不是剪裁路徑可以調整大小爲mozilla瀏覽器

我正在使用d3來建立散點圖，其中我已經使用剪輯路徑給我的圖表中的縮放功能。但只有當我在Mozilla瀏覽器中打開頁面時，剪輯路徑的高度和寬度才保持不變。這對鉻瀏覽器來說工作得很好。即使我減少或增加剪輯路徑的大小，它採用默認的寬度和高度爲Mozilla瀏覽器。另外，當我改變矩形圈它將剪輯路徑作爲矩形。這個問題只適用於Mozilla瀏覽器。我的代碼：是不是剪裁路徑可以調整大小爲mozilla瀏覽器

that.svgContainer = d3.select("#chart") 
       .append('svg') 
       .attr("width",that.w) 
       .attr("height",that.height) 
       .attr("id","svgcontainer") 
       .attr("class","svgcontainer"); 

that.group = that.svgContainer.append("g") 
       .attr("transform","translate("+(that.margin_left)+","+(that.margin_top)+")") 
       .attr("id","main"); 
clip = that.group.append("svg:clipPath") 
         .attr("id", "clip") 
         .append("svg:rect") 
         .attr("width",(that.w-that.margin_left-that.margin_right)) 
         .attr("height", that.height-that.margin_top-that.margin_bottom); 

chartBody = that.group.append("g") 
         .attr("clip-path", "url(#clip)");

所以請建議我一些替代方案。

來源

2014-10-11 devanshi28

的問題是clipPath寬度和高度保持不變的，它是不會改變的Firefox。所以散點圖中的氣泡由於氣候變化的高度和寬度而變小。即使我增加clipPath的高度，它仍然保持不變，它不會改變。 – devanshi28 2014-10-11 08:05:35

我理解您的擔憂，但在這個開發階段，我們無法將代碼發佈到任何測試服務器。但是，是的，如果你能告訴我firefox是否真的有clippath沒有得到任何自定義寬度/高度這樣的問題。 – devanshi28 2014-10-11 08:26:14

對我來說工作得很好，它一定是你的代碼（有些部分你可能沒有顯示），這是錯誤的。

<svg width="120" height="120" 
 
    viewPort="0 0 120 120" version="1.1" 
 
    xmlns="http://www.w3.org/2000/svg"> 
 

 
    <defs> 
 
     <clipPath id="myClip"> 
 
      <circle id="c" cx="50" cy="50" r="20"/> 
 
     </clipPath> 
 
    </defs> 
 
    <script> 
 
     i = 0; 
 
     function go() { 
 
      var circle = document.getElementById("c"); 
 
      if (i == 0) { 
 
       ++i; 
 
       circle.setAttribute("r", "25"); 
 
       return; 
 
      } 
 
      var clip = document.getElementById("myClip"); 
 
      clip.removeChild(circle); 
 
      var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); 
 
      rect.setAttribute("x", "50"); 
 
      rect.setAttribute("y", "50"); 
 
      rect.setAttribute("width", "20"); 
 
      rect.setAttribute("height", "30"); 
 
      clip.appendChild(rect); 
 
     } 
 
    </script> 
 
    
 
    <rect x="10" y="10" width="100" height="100" 
 
      clip-path="url(#myClip)" onclick="go()"/> 
 
    
 
</svg>

來源

2014-10-11 08:41:38

感謝您的幫助。這個問題是因爲我在具有相同ID的單個網頁中有多個clipPath，所以在firefox中，它取第一個clipPath的寬度和高度，併爲所有clipPath應用相同的屬性。 – devanshi28 2014-10-11 10:09:39

是不是剪裁路徑可以調整大小爲mozilla瀏覽器

回答

相關問題