Question

我正在使用d3构建一个散点图，其中我使用剪辑路径在我的图表中提供缩放功能。但是只有当我在mozilla浏览器中打开页面时，剪辑路径的高度和宽度才会保持不变。这对于chrome浏览器来说非常合适。即使我减少或增加剪辑路径的大小，它采用默认的宽度和高度为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)");

所以请建议我一些替代方案。

Answer 1

对我来说很好，它必须是你的代码（你可能没有显示的某些部分）这是错误的。

<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>

是否可以为mozilla浏览器调整剪辑路径的大小

1 个答案: