İmleç: işaretçi; svg öğesinde çalışmıyor

Question

Sitemde svg elemanları kullanıyorum. Bazen onlara tıklanabilir olması gerektiğine inanıyorum, bu yüzden onlara işaretçi imleci istiyorum.

Ancak

cursor: pointer; 

çalışmaz css sınıfı veya stil eklemek. Sadece svg ile worki değil gibi örnek elemanını var

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

görünüyor. Herkes nasıl düzeltileceğini ya da etrafından nasıl geçeceğini biliyor mu?

Answer 1

AmeliaBR'nin yorumu belirttiği gibi, bu stili SVG <object> içine eklemelisiniz.

Ayrıca, SVG'niz çok basit olmadığı sürece, aynı sorunu yaşayabilirsiniz: yalnızca SVG'deki şekillerden birinin üzerine geldiğinizde, ancak şekiller arasındayken işaretçiyi görmeniz.

(Bazı durumlarda bu davranış isteyebilirsiniz, ama bir işaret deseni için, örneğin, genellikle bütün dikdörtgen tıklanabilir değil, sadece tek tek harfler olmak istiyorum.)

bütün dikdörtgen tıklanabilir hale getirmek için, svg { cursor: pointer; }'u ekleyin. Sadece tıklanabilir belirli unsurları istiyorsanız, sınıf bunları isim:

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

    /* OR */ 

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

Answer 2

çalışmıyor svg elemana doğrudan "cursor: pointer" ekleyerek varsa, object doğrudan Sözde (unsurlarını bir şeffaf eleman eklemeyi deneyin ya SVG üzerinde kesinlikle konumlandırılmış olan SVG ile aynı boyutlarda.

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>

Yoksa yerine object bir img alıp img için "cursor: pointer" tarzı ekleyebilirsiniz:

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

Answer 3

sizin SVG öğeleri tek tek şekillendirmek için Javascript'i kullanabilir veya görüntü içindeki CSS'yi defs etiketinde kullanabilir veya harici bir stil sayfasına referansta bulunabilirsiniz.

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

fazla bilgi için kontrol this link.

Ayrıca bu gibi SVG için Harici bir stil kullanabilirsiniz:

<?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> 

kontrol this link fazla bilgi için. En basit çözüm

Answer 4

Bir ideal olarak size html svg gömebilirsiniz, her ne kadar

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

nesne etiketinin yerine img etiketi kullanmak olabilir. Bu svg dosyaları önbelleğe almanıza izin vermez, bu yüzden svg dosyasını metin olarak yüklemek için javascript kullanarak buldum ve önbelleğe alma için izin verilen DOM'a ekledim ve SVG'yi doğrudan DOM'a aldım böylece tüm css stillerini kullanabilsin Senin sayfan. tıklama teslim edilecektir böylece

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

2) object öğeden işaretçi olayları kaldırın:

1) tıklanabilir hale getirmek için <a> içine svg sarın:

Answer 5

bu diğerleri arasında en kolay çözüm olduğunu düşünüyorum <a> doğrudan:

object{ 
    pointer-events: none; 
} 

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