Question

我有一个带有SVG的rails应用程序，它有一些省略号作为链接。链接可以正常工作，但他们不能与Turbolinks合作。普通链接可以与turbolinks一起使用。有没有办法让SVG链接与Turbolinks一起使用？

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      height="650px" viewBox="0 0 341.334 532.666" enable-background="new 0 0 341.334 532.666"
     xml:space="preserve" id="map">
 <g id="Layer_2">
    <a xlink:href="/lotes/84" data-toggle="tooltip" title="Lote 84">
        <ellipse fill="none" id="L-84" stroke="#000000" stroke-miterlimit="10" cx="27.833" cy="135.997" rx="23.833" ry="24.333" class="lote "/>
    </a>
    <a xlink:href="/lotes/090" data-toggle="tooltip" title="Lote 090">
        <ellipse fill="none" id="L-090" stroke="#000000" stroke-miterlimit="10" cx="74.667" cy="185.831" rx="23" ry="24.167" class="lote Algodon"/>
    </a>
    <a xlink:href="/lotes/091" data-toggle="tooltip" title="Lote 091">
        <ellipse fill="none" id="L-091" stroke="#000000" stroke-miterlimit="10" cx="122.833" cy="187.331" rx="23.833" ry="24" class="lote Algodon"/>
    </a>
 </g>
</svg>

Answer 1

我只是opened an issue。与此同时，使用Turbolinks 3（不确定2），您可以使用Turbolinks.visit()管理变通方法。

使用jQuery：

$('svg a').on('click', function(event) {
  event.preventDefault();
  Turbolinks.visit( this.getAttribute('href') );
});

使用D3：

svg.selectAll('a')
  .on('click', function() {
    d3.event.preventDefault();
    Turbolinks.visit( 
      d3.select(this).node().getAttribute('href')
    );
  });

Turbolinks无法使用SVG链接

1 个答案: