javascript - SVG 过滤器元素剪辑引用路径

Question

我发现 svg 过滤器元素与路径元素一起使用时存在问题。当路径元素具有类似 d="M28,46L28,23L77,23" 的指令来渲染两条正交线时，它可以与滤镜一起正常工作，并且投影可以按预期渲染，但长度不同其中一条线接近零时，就会出现问题:路径元素(包括任何标记)开始被过滤器剪切。
我不明白到底发生了什么，但似乎过滤器的边界框(路径边界框的百分比)折叠到零高度，这以某种方式剪辑了引用路径元素。一旦路径边界框变为零，问题就消失了(至少在 Chrome 和 Opera 中是这样……)。

我找不到任何与此相关的错误报告，任何人都可以解释这种行为和/或建议一种处理方法吗？

  var width = 300,
    height = 100,
    constant = 10;

  var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);

  var defs = svg.append("defs");
  var markerW = 8,
    markerH = 6,
    marker = defs.append('marker')
    .attr('id', "triangle")
    .attr('viewBox', "0 0 10 10")
    .attr('refX', "0")
    .attr('refY', 5)
    .attr('markerUnits', 'strokeWidth')
    .attr('markerWidth', markerW)
    .attr('markerHeight', markerH)
    .attr('orient', 'auto')

  var path = marker.append('path')
    .attr('d', "M 0 0 L 10 5 L 0 10 z")

  // create filter with id #drop-shadow
  // height=130% so that the shadow is not clipped
  var filter = defs.append("filter")
    .attr("id", "drop-shadow")
    .attr({
      "height": "200%",
      "width": "200%",
      x: "-50%",
      y: "-50%"
    })
    /*.style({opacity: 0.5})*/
  ;

  // SourceAlpha refers to opacity of graphic that this filter will be applied to
  // convolve that with a Gaussian with standard deviation 3 and store result
  // in blur
  filter.append("feGaussianBlur")
    .attr("in", "SourceAlpha")
    .attr("stdDeviation", 1)
    .attr("result", "blur");

  // translate output of Gaussian blur to the right and downwards with 2px
  // store result in offsetBlur
  var feOffset = filter.append("feOffset")
    .attr("in", "blur")
    .attr("dx", 2)
    .attr("dy", 2)
    .attr("result", "offsetBlur");

  // overlay original SourceGraphic over translated blurred opacity by using
  // feMerge filter. Order of specifying inputs is important!
  var feMerge = filter.append("feMerge");

  feMerge.append("feMergeNode")
    .attr("in", "offsetBlur")
  feMerge.append("feMergeNode")
    .attr("in", "SourceGraphic");

  var connector = d3.svg.line().interpolate("linear")
    .x(function(d) {
      return Math.round(d[0])
    })
    .y(function(d) {
      return Math.round(d[1])
    });

  function linkPath(d) {
    var x1 = d[0][0],
      y1 = d[0][1],
      x2 = d[1][0],
      y2 = d[1][1];
    return connector([
      [x1, y1],
      [x1, y2],
      [x2, y2]
    ]);
  }
  var link = svg.selectAll('.link')
    .data([
      [
        [10, 40],
        [200, 40]
      ]
    ])
    .enter()
    .append('path').attr("class", "link")
    .attr("stroke-width", "2")
    .attr('marker-end', 'url(#triangle)')
    .attr('stroke', 'black')
    .attr("fill", "none")
    .style("filter", "url(#drop-shadow)")
    .attr("d", linkPath)

  function start() {
    var t = 3000;
    link.data([
        [
          [10, 60],
          [200, 40]
        ]
      ])
      .transition().delay(t / 3).duration(t).ease("linear")
      .attr("d", linkPath)
      .each("end", function() {
        link.data([
            [
              [10, 40],
              [200, 40]
            ]
          ])
          .transition().duration(t).ease("linear")
          .attr("d", linkPath)
          .each("end", function() {
            link.data([
                [
                  [10, 20],
                  [200, 40]
                ]
              ])
              .transition().delay(t / 3).duration(t).ease("linear")
              .attr("d", linkPath)
              .each("end", function() {
                link.data([
                    [
                      [10, 40],
                      [200, 40]
                    ]
                  ])
                  .transition().duration(t).ease("linear")
                  .attr("d", linkPath)
                  .each("end", start)
              })
          })
      })
  };
  start();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 1

Filter Effects Region ，使用 x、y、width 和 height 属性设置，描述过滤器覆盖的区域适用。

如果您用百分比来定义它，它会随着路径边界框的缩小而缩小。即使您使用很大的百分比，当边界框折叠时它也会折叠为零。这就是你剪辑的原因。

好消息是您不必使用百分比。只需在适当的坐标中指定一个过滤区域即可。

  var width = 300,
    height = 100,
    constant = 10;

  var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);

  var defs = svg.append("defs");
  var markerW = 8,
    markerH = 6,
    marker = defs.append('marker')
    .attr('id', "triangle")
    .attr('viewBox', "0 0 10 10")
    .attr('refX', "0")
    .attr('refY', 5)
    .attr('markerUnits', 'strokeWidth')
    .attr('markerWidth', markerW)
    .attr('markerHeight', markerH)
    .attr('orient', 'auto')

  var path = marker.append('path')
    .attr('d', "M 0 0 L 10 5 L 0 10 z")

  // create filter with id #drop-shadow
  // height=100 pixels so that the shadow is not clipped
  var filter = defs.append("filter")
    .attr("id", "drop-shadow")
    .attr("filterUnits", "userSpaceOnUse")
    .attr({
      "height": "100",
      "width": "300",
      x: "-50",
      y: "-50"
    })
    /*.style({opacity: 0.5})*/
  ;

  // SourceAlpha refers to opacity of graphic that this filter will be applied to
  // convolve that with a Gaussian with standard deviation 3 and store result
  // in blur
  filter.append("feGaussianBlur")
    .attr("in", "SourceAlpha")
    .attr("stdDeviation", 1)
    .attr("result", "blur");

  // translate output of Gaussian blur to the right and downwards with 2px
  // store result in offsetBlur
  var feOffset = filter.append("feOffset")
    .attr("in", "blur")
    .attr("dx", 2)
    .attr("dy", 2)
    .attr("result", "offsetBlur");

  // overlay original SourceGraphic over translated blurred opacity by using
  // feMerge filter. Order of specifying inputs is important!
  var feMerge = filter.append("feMerge");

  feMerge.append("feMergeNode")
    .attr("in", "offsetBlur")
  feMerge.append("feMergeNode")
    .attr("in", "SourceGraphic");

  var connector = d3.svg.line().interpolate("linear")
    .x(function(d) {
      return Math.round(d[0])
    })
    .y(function(d) {
      return Math.round(d[1])
    });

  function linkPath(d) {
    var x1 = d[0][0],
      y1 = d[0][1],
      x2 = d[1][0],
      y2 = d[1][1];
    return connector([
      [x1, y1],
      [x1, y2],
      [x2, y2]
    ]);
  }
  var link = svg.selectAll('.link')
    .data([
      [
        [10, 40],
        [200, 40]
      ]
    ])
    .enter()
    .append('path').attr("class", "link")
    .attr("stroke-width", "2")
    .attr('marker-end', 'url(#triangle)')
    .attr('stroke', 'black')
    .attr("fill", "none")
    .style("filter", "url(#drop-shadow)")
    .attr("d", linkPath)

  function start() {
    var t = 3000;
    link.data([
        [
          [10, 60],
          [200, 40]
        ]
      ])
      .transition().delay(t / 3).duration(t).ease("linear")
      .attr("d", linkPath)
      .each("end", function() {
        link.data([
            [
              [10, 40],
              [200, 40]
            ]
          ])
          .transition().duration(t).ease("linear")
          .attr("d", linkPath)
          .each("end", function() {
            link.data([
                [
                  [10, 20],
                  [200, 40]
                ]
              ])
              .transition().delay(t / 3).duration(t).ease("linear")
              .attr("d", linkPath)
              .each("end", function() {
                link.data([
                    [
                      [10, 40],
                      [200, 40]
                    ]
                  ])
                  .transition().duration(t).ease("linear")
                  .attr("d", linkPath)
                  .each("end", start)
              })
          })
      })
  };
  start();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>