Question

我的SVG元素设置如下：

svg.attr("viewBox", "0 0 " + chartView.displayWidth + " " + chartView.displayHeight);

我在里面画了一些情节。有没有办法创建一个＆＃34;透视窗口＆＃34;在哪里，我可以看到我的阴谋？

我尝试使用：

svg.append("clipPath").append("rect")
                    .attr("x", 10)
                     .attr("y", 10)
                    .attr("width", 50)
                   .attr("height", 100);

但它不起作用

Answer 1

正如评论中已经提到的，您将使用ClipPath。您已尝试使用append创建一个。据我所知，这是D3.js或jQuery语法。但是你标记了svg.js。在svg.js中你会这样做：

svg.viewbox(0, 0, chartView.displayWidth, chartView.displayHeight);

var plot = svg.path('your plots path data').stroke('#000')

var clipper = svg.rect(50, 100).move(10, 10)

// to clip the whole svg use svg instead of plot
plot.clipWith(clipper)

如果你使用D3.js，你几乎就在那里。你已经创造了clippath。你现在必须给它一个id，并在你的情节中引用这个id。

var clip = svg.append("clipPath").attr("id", "clipper");
clip.append("rect").attr("x", 10)
                   .attr("y", 10)
                   .attr("width", 50)
                   .attr("height", 100);

yourplot.attr("clip-path", "url(#clipper)")

如果你想用你的矩形剪辑整个svg，请使用svg.attr(...)代替yourplot.attr(...)

请务必阅读svg规范或有关clipPaths的一些教程

如何剪辑SVG图？

1 个答案: