是不是剪裁路径可以调整大小为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浏览器

回答

相关问题