Question

当我使用Snap创建文本元素时，例如，字母＆＃34; a＆＃34;，捕获点击事件的周围区域远大于边界框，比例因子至少为10.这意味着如果我创建第二个文本元素＆＃34; b＆＃34;虽然接近但在视觉上与＆＃34; a＆＃34;分开，但是交互区域具有较大的交集，因此点击哪个元素主要取决于哪个元素在较早/较晚的层中。

是否可以缩小交互区域以尽可能地匹配边界框，以便分层不会影响触发哪个元素的点击事件？

Here's a jsfiddle example，其中字体大小最初设置为0.1px，这是I＆＃39; m的数量级。（相对于边界框的交互区域的大小似乎随着字体大小的减小而增加。）请注意，因为＆＃34; b＆＃34;是在＆＃34; a＆＃34;之后创建的，是触发＆＃34; a＆＃34;的唯一方法。几乎点击画布的左边缘。我希望做的是有一系列像这样的元素，它们之间有相似的间距。

＆＃13;

var s = Snap("#svg");

var fontsize = 0.1;

var make_text_box = function(string, fontsize, color) {
  var text = s.text(0, 0, string);
  text.attr({
    'font-size': fontsize + 'px'
  });
  text.click(
    function() {
      text.attr({
        fill: color
      });
    }
  );

  var bbx = text.getBBox().x;
  var bby = text.getBBox().y;
  var bbw = text.getBBox().w;
  var bbh = text.getBBox().h;

  var strokewidth = fontsize / 10;
  var bbox = s.rect(bbx, bby, bbw, bbh)
    .attr({
      stroke: "black",
      strokeWidth: strokewidth,
      fill: "none"
    });

  var text_and_box = s.g(text, bbox);
  return {
    g: text_and_box,
    x: bbx,
    y: bby
  };
};

var a_box = make_text_box("a", fontsize, "red");
var b_box = make_text_box("b", fontsize, "limegreen");
b_box.g.transform("translate(" + (2 * fontsize) + ", 0)");

s.attr({
  viewBox: (a_box.x - 4 * fontsize) + ", " + (a_box.y - 4 * fontsize) + ", " + (30 * fontsize) + ", " + (10 * fontsize)
});

＆＃13;

<script src="https://cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

＆＃13;

Answer 1

我觉得你可能需要一些hacky解决方法，因为我不知道如何做你想做的事。我认为那里有几个错误，或者可能不清楚小字体会发生什么。像罗伯特这样的人可能会有更好的主意。

如果您将font-size保持为更大，但随后缩小元素，您可能会获得更多成功。所以......就像......

var fontsize = 10;

var text = s.text(0, 0, string);

text.attr({
  'font-size': fontsize + 'px',
  'transform': 's0.05'
});

jsfiddle

这和我一样小，但仍然可以看到并点击它。您可能希望使用形状渲染和文本渲染来使其更加清晰。

如何修改svg文本元素的交互区域以匹配其边界框？

1 个答案: