4

我是 d3 和 svg 的新手

有人可以向我解释一下在技术上如何使用剪辑路径元素进行拖动/平移

http://jsfiddle.net/MKmHM/1/

var zoom = d3.behavior.zoom()
    .x(x)
    .on("zoom", draw);

svg.append("clipPath")
    .append("rect")
    .attr("id", "clip")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", "blue");

svg.append("rect")
    .attr("class", "pane")
    .attr("width", width)
    .attr("height", height)
    .call(zoom);

svg.append("path")
    .attr("class", "line")
    .attr("clip-path", "url(#clip)");

矩形 css

rect.pane {
    cursor: move;
    fill: none;
    pointer-events: all;
}
4

2 回答 2

1

细节决定成败

我希望你自己已经找到了正确的答案，问题和我的回答之间有一点延迟；）

您的解决方案有效，只是矩形稍微放错了位置并且需要替换两行代码：


svg.append("clipPath")
    .attr("id", "clip")  // <-- we need to use the ID of clipPath
    .append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", "blue");

  ...
 
  svg.append("path")
    .attr("class", "line")
    .attr("clip-path", "url(#clip)");   <-- here

更正后的代码在这里。

如何使用剪辑

@Scott Cameron 建议的站点还显示了一些工作示例，它们帮助我弄清楚如何正确地对组和其他元素应用剪辑。

对组应用裁剪的解决方案的好处是我们不必分别对每条网格线和数据线应用。

以下 SVG 示例来自上述站点，稍作修改，适用于浏览器和 inkscape：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   viewBox="0 0 1100 400" version="1.1">
    <defs>
        <rect id="r1" width="150" height="150" stroke="black" stroke-width="1"/>
        <circle id="r2" cx="100" cy="100" r="100" stroke="black" stroke-width="1"/>
        <circle id="r3" cx="100" cy="100" r="100" stroke="black" stroke-width="1"/>
        <radialGradient id="g1" cx="50%" cy="50%" r="50%" fx="25%" fy="25%">
            <stop stop-color="black" offset="0%"/>
            <stop stop-color="teal" offset="50%"/>
            <stop stop-color="white" offset="100%"/>
        </radialGradient>
        <clipPath id="clip1">
            <path d="M 0 0 L 550 200 L 1100 0"/>
        </clipPath>
    </defs>
    <g clip-path="url(#clip1)">
        <use x="250" y="0" xlink:href="#r1" fill="url(#g1)"/>
        <use x="350" y="150" xlink:href="#r2" fill="url(#g1)"/>
        <use x="580" y="50" xlink:href="#r3" fill="url(#g1)"/>
    </g>
</svg>

我们并不孤单

如果我们在某个时候卡住了，我们通常需要正确的工具而不是正确的文档：

  • 找到一个解决方案来检查你在做什么是实际发生的事情；

  • 将您的任务分成更小的部分并分别检查；

  • 不要只看你预期错误的地方。

  • 来这里问一些问题，你会得到答案。总有一天;)

于 2020-07-13T19:32:20.000 回答
-3

以下是 SVG 裁剪工作原理的简短描述：http ://www.svgbasics.com/clipping.html 。

于 2013-08-08T16:25:42.510 回答