Con trỏ: con trỏ; trên phần tử svg không hoạt động

Question

Trong trang web của tôi, tôi sử dụng các phần tử svg. Đôi khi tôi cần chúng có thể nhấp được, do đó tôi muốn con trỏ trỏ qua chúng.

Tuy nhiên thêm lớp css hay phong cách

cursor: pointer; 

không hoạt động.

Đó là các yếu tố ví dụ

<object id="male2" type="image/svg+xml" data="course/ani/male2.svg" style="left: 87px; bottom: 56px;" es-character="male2"></object> 

Nó có vẻ như nó chỉ không gia công với svg. Bất cứ ai biết cách sửa chữa, hoặc làm thế nào để đi xung quanh nó?

Answer 1

Như bình luận của AmeliaBR cho biết, bạn nên thêm kiểu này bên trong SVG <object>.

Và trừ khi SVG của bạn rất đơn giản, bạn có thể gặp vấn đề tương tự: chỉ nhìn thấy con trỏ khi bạn đang di chuột qua một trong các hình dạng trong SVG, nhưng không phải khi bạn ở giữa các hình dạng.

(Trong một số trường hợp, bạn có thể muốn hành vi đó, nhưng đối với một wordmark, ví dụ, bạn thường muốn toàn bộ hình chữ nhật được nhấp, không chỉ là các chữ cái riêng biệt.)

Để làm cho toàn bộ nhấp được hình chữ nhật, thêm svg { cursor: pointer; }. Nếu bạn chỉ muốn yếu tố cụ thể nhấp được, đặt tên cho chúng bằng lớp:

<svg ...> 
    <style> 
    svg { cursor: pointer; } /* whole rectangle */ 

    /* OR */ 

    .element-name { cursor: pointer; } /* specific elements */ 
    </style> 
    ... 
</svg> 

Answer 2

Nếu thêm "cursor: pointer" trực tiếp đến svg yếu tố không làm việc, bạn có thể cố gắng thêm một yếu tố trong suốt (Pseudo yếu tố trực tiếp trên object không hoạt động) với cùng kích thước như SVG được định vị hoàn toàn trên SVG.

a.svg-cursor:before { 
 
content: ""; 
 
display: block; 
 
position: absolute; 
 
background-color: transparent; 
 
cursor: pointer; 
 
/* plus width and height of the SVG */ 
 
}

<a href="#" class="svg-cursor"> 
 
<object id="male2" type="image/svg+xml" data="course/ani/male2.svg" es-character="male2"></object> 
 
</a>

Hoặc bạn có thể mất một img thay vì object và thêm "cursor: pointer" kiểu đến img:

<img id="male2" src="course/ani/male2.svg" style="left: 87px; bottom: 56px;" alt="Description" />

Answer 3

Để tạo kiểu cho các yếu tố cá nhân trong SVG của bạn bạn có thể sử dụng Javascript hoặc sử dụng CSS bên trong hình ảnh trong thẻ defs hoặc tham chiếu đến biểu định kiểu bên ngoài.

<svg ...> 
    <defs> 
    <style type="text/css"><![CDATA[ 
     .myfigureclass { 
     cursor: pointer; 
     } 
    ]]></style> 
    </defs> 

Kiểm tra this link để biết thêm thông tin.

Bạn cũng có thể sử dụng một kiểu dáng bên ngoài cho SVG của bạn như thế này:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<?xml-stylesheet type="text/css" href="style.svg.css" ?> 

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    ...> 
(...) 
</svg> 

Kiểm tra this link để biết thêm thông tin.

Answer 4

Một trong những giải pháp đơn giản có thể sử dụng thẻ img thay vì thẻ đối tượng

<img src="course/ani/male2.svg" style="left: 87px; bottom: 56px;" /> 

mặc dù, lý tưởng bạn có thể nhúng các svg trong html. Điều đó không cho phép bạn lưu các tệp svg, vì vậy tôi đã tìm thấy bằng cách sử dụng javascript để tải tệp svg dưới dạng văn bản và chèn vào DOM cho phép lưu vào bộ nhớ đệm và vẫn có SVG trực tiếp vào DOM để có thể sử dụng tất cả các kiểu css từ trang của bạn.

Answer 5

Tôi nghĩ rằng đây là giải pháp đơn giản nhất trong số những người khác:

1) quấn svg vào <a> để làm cho nó có thể click:

<a href="#"> 
    <object> 
     <embed src="img.svg"></embed> 
    </object> 
</a> 

2) loại bỏ các sự kiện con trỏ từ object yếu tố để nhấp chuột sẽ được giao đến số <a> trực tiếp:

object{ 
    pointer-events: none; 
} 

a{ 
    display: inline-block; /* or block if you need */ 
}