Set con trỏ là <symbol> yếu tố

Question

Tôi có một biểu tượng HTML

<symbol id="arrow" viewBox="0 0 8.4666659 8.4666659"> 
    <g transform="translate(0,-288.53334)"> 
    <path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 0.17215798,288.70836 8.05225192,8.04935"></path> 
    <path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 8.2221335,293.64243 0.00228,3.11528 -3.1283502,2.2e-4"></path> 
    </g> 
</symbol> 

mà tôi muốn sử dụng như con trỏ. Tôi quen với việc thay đổi con trỏ qua JQuery như thế này:

body.css('cursor', `wait`); 

Nhưng làm thế nào tôi có thể làm điều này cho một yếu tố <symbol>?

Answer 1

Bạn có thể đặt hai thành phần <svg> một để xác định biểu tượng SVG của bạn và phần tử còn lại để giữ phần tử. Sau đó, với Javascript, bạn có thể thiết lập một người nghe sự kiện và thay đổi vị trí của toàn bộ <svg> (cái giữ phần tử của bạn) khi con trỏ của người dùng di chuyển. Ngoài ra, tôi đã ẩn con trỏ trình duyệt mặc định với thuộc tính CSS cursor: none. Dưới đây là một mã làm việc:

document.addEventListener('mousemove', function(e) { 
 

 
    let newTransformRule = 'translate(' + (e.pageX - 360) + 'px, ' + (e.pageY - 115) + 'px)'; 
 

 
    document.querySelector('#arrowCanvas').style.transform = newTransformRule; 
 

 
});

body { 
 
    cursor: none; 
 
}

<svg> 
 
    <symbol id="arrow" viewBox="0 0 8.4666659 8.4666659"> 
 
    <g transform="translate(0,-288.53334)"> 
 
     <path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 0.17215798,288.70836 8.05225192,8.04935"></path> 
 
     <path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 8.2221335,293.64243 0.00228,3.11528 -3.1283502,2.2e-4"></path> 
 
    </g> 
 
    </symbol> 
 
</svg> 
 

 
<svg id="arrowCanvas" width="100" height="60"> 
 
    <use href="#arrow" width="100" height="50"/> 
 
</svg>

Bạn sẽ phải tinh chỉnh các giá trị trong newTransformRule để tập trung con trỏ tùy chỉnh của bạn với con trỏ mặc định. Loại bỏ quy tắc CSS để thực hiện điều chỉnh.

Mã đang hoạt động trên FF, Chrome và Edge.

Answer 2

@Ivan câu trả lời là tốt, nhưng, theo cách này nó sẽ làm việc tốt hơn.

Tôi chỉ cần thực hiện một số thay đổi

document.addEventListener('mousemove', function(e) { 
 

 
    let newTransformRule = 'translate(' + (e.pageX - 380) + 'px, ' + (e.pageY - 60) + 'px)'; 
 

 
    document.querySelector('#arrowCanvas').style.transform = newTransformRule; 
 

 
});

body { 
 
    cursor: none; 
 
} 
 

 
#arrowCanvas { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    z-index: -1; 
 
}

<svg id="arrowContainer"> 
 
    <symbol id="arrow" viewBox="0 0 8.4666659 8.4666659"> 
 
    <g transform="translate(0,-288.53334)"> 
 
     <path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 0.17215798,288.70836 8.05225192,8.04935"></path> 
 
     <path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 8.2221335,293.64243 0.00228,3.11528 -3.1283502,2.2e-4"></path> 
 
    </g> 
 
    </symbol> 
 
</svg> 
 

 
<svg id="arrowCanvas" width="100" height="60"> 
 
    <use href="#arrow" width="100" height="50"/> 
 
</svg>