Question

我遇到了关于textPath元素的Chrome和Safari的问题。

如果我将单击或鼠标悬停（或可能是任何其他鼠标事件）分配给textPath元素，则会在渲染文本之外触发事件。

JSFiddle here 我正在使用D3 Library

var svg = d3.select('body')
  .append('svg').attr("id", "theSVG")
  .attr( "width" , "100%").attr( "height" , "100%" )
  .attr( "viewBox" , [0,0, window.innerWidth, window.innerHeight] )
  .attr("shape-rendering","geometricPrecision")
  .attr("text-rendering","geometricPrecision"); 

var testPath = svg.append('path').attr('d','M117.80446300769222,286.46257269243245H144.98419522723069Q244.6432133655384,286.46257269243245 344.3022315038461,190.7312863462162T543.6202677804615,94.99999999999994H571.8') 
  .attr('style', 'fill: none; stroke: red; stroke-width: 100')
  .attr('id', 'testPath');

var testText = svg.append('text')
  .append('textPath').attr('id', 'testText')
  .attr('xlink:href', '#testPath')
  .append('tspan').text('this is a test text and a test textpath thingy');

testText.node().addEventListener('mouseover', function (e) {e.target.style.fill = 'blue';});
testText.node().addEventListener('mouseout', function (e) { e.target.style.fill = 'black';});

我添加了一个mouseover / out事件，以便在触发鼠标悬停时突出显示文本。如果您将鼠标悬停在Chrome中的文字上，即使您向文本外部（向上）移动，也可以看到它仍然突出显示。

使用Chrome Inspector，该元素实际上是一个矩形，其中包含文字。

有没有办法让事件只适用于渲染文本而不是整个元素，就像在Firefox / IE中一样？

这在Firefox和Internet Explorer中运行良好。谢谢！

Chrome文字路径点击和悬停在渲染文字之外触发

0 个答案: