Question

var handler = new HttpClientHandler { AutomaticDecompression = DecompressionMethods.GZip | DecompressionMethods.Deflate }; HttpClient client = new HttpClient(handler);是一个二维数组，其中drawAll是包含该图形中所有笔划的元素/图形。以字符串表示的笔划是一系列可用于创建drawAll[i]的2D点。

我正在尝试将每个<path>拖放到.element svg中的任何其他位置。我跟着this answer，但我的元素没有被轻易拖动 - 我必须在拖动事件被触发之前尝试多次拖动。我不确定出了什么问题或者如何轻松拖动元素。提前致谢。：）

#canvas示例包含两个元素（每个元素只包含一个笔划）：

drawAll

HTML：

var drawAll = [["M6,239 C6,239 46,149 88,67 127,6 135,0 140,19 143,74 151,129 158,156 185,221 184,243 166,251 127,255 52,252 0,246"],["M113,15 C113,15 45,95 28,114 23,115 0,148 48,166 114,184 255,184 208,125 178,75 147,12 122,0"]];

JS：

    <div id="wrapper">
        <svg id="canvas" preserveAspectRatio="none" height="400" width="400" viewbox="0 0 2000 2000"></svg>
    </div>

Answer 1

查看pointer-events演示文稿属性，以调整可以引发事件的位置。

要想达到一个狭窄的笔触，你也可以将它与更宽，更透明的线条结合起来，只有那里才能捕捉事件：

var group = element.selectAll("g .stroke")
    .data(function(d){
        return d;
    })
    .enter()
    .append("g")
    .attr("style", "fill: none; stroke: black")
    .attr("class", "stroke");

group.append("path")
    .attr("d", function(d){
        return d;
    })
    .attr("style", "stroke-width: 10; stroke-linecap: round; opacity: 0");

group.append("path")
    .attr("d", function(d){
        return d;
    })
    .attr("style", "stroke-width: 2;");

使用dv-drag对svg元素拖动事件不会轻易触发

1 个答案: