Gerçekten dairesel bir SVG düğmesi oluşturabilir misiniz?

Günlerdir bu konudaydım ve bu konuda herhangi bir destek bulamıyorum.Gerçekten dairesel bir SVG düğmesi oluşturabilir misiniz?

Kişisel web sitem için farklı boyutlarda dairesel düğmeler içeren bir ana sayfa oluşturuyorum. Başlangıçta kenarlık-yarıçapı özelliğini kullanarak (iyi çalıştı) kullanan daireler yaratıyordum, ancak şimdi SVG şekilleri'a yükseltmeye çalışıyorum. Ne keşfettiğim, her zaman herhangi bir SVG elemanının (görüntüleyici sanırım) etrafındaki görünmez bir kare kutu olmasıdır. Bu, düğmesinde (yani, görüntü kutusunun köşeleri) imleç olmadan düğmesini tıklayabildiğim anlamına gelir. Düğmeler bir çizgide ve aynı boyutta olsaydı bu bir sorun olmaz, ancak bir satırda değil ve bazıları diğerlerinden daha büyüktür.

Gerçekten dairesel bir SVG düğmesi oluşturmanın bir yolu var mı?

kaynak

2016-03-25 GHOST-34

Bu sorunun, bir SVG kullandığınız ve HTML kullanmanızla ilgili yapmanız gereken hiçbir şey yoktur.

Varsayılan olarak HTML, tüm kutulardır. Çoğunlukla bir yuvarlama yok.

Kullanılabilecek iki uygun seçeneğiniz vardır.

Kenarlık yarıçapını SVG ile birlikte kullanın. Doğru değerleri koymak SVG'yi kırpmaz, sadece tıklanabilir köşeleri kaldıracaktır. Bir map kullanın. Bu bir süredir ortadadır ve bu nedenle tüm büyük tarayıcılarda tekdüze bir sözdizimi ile desteklenir.

Çok daha kolay olduğu için # 1 öneririm. # 2 daha fazla bilgi almanızı ister (yarıçap ve merkez noktası).

kaynak

2016-03-25 21:33:17 David

Haha! İlk önce çalıştı! Biliyorsun, bunu daha önce denedim ve işe yaramadı. CSS'mde bir yazım hatası olmalı. Ayrıca hızlı geri bildirim için teşekkürler. Bunu bir saatten daha önce yayınlamadı. –

"Görüntü kutusunun" aslında bir tuvalin daha çok bir dikdörtgendir olduğu varsayımıyla ilgili haklısınız. Boyut, ilk SVG Etiketi'nde() verilmiştir.

Resmi yalnızca daire içine bağlı hale getirmeniz çok önemliyse, bazı javasript eklemelisiniz.

Bunu en iyi nasıl yapmak, eklemek istediğiniz kitaplıklara (örneğin, jquery) bağlıdır. Genel olarak

bu şöyledir:

var x, y; fare imlecinin SVG'nin ortasındaki konumu (günahı kullanmanın en kolay yolu ve daha sonra).
var r; daire
var alpha = arctan'ın (y/x) yarıçapıdır; // = Math.abs iç orta
var doğru noktasının açı (cos (a)) < Math.abs (x/r) & & Math.abs (sin (a)) < Math.abs (y/r); // iç, nokta

kaynak

2016-03-25 21:49:06

Hızlı geri bildiriminiz için teşekkürler! Bir javascript çözümünün var olduğunu biliyordum, ancak bunu sadece CSS'de yapmaya çalışıyordum (belirtmeliydim). Yine de cevap ve hızlı yanıt için teşekkürler. –

dairesi içinde doğruysa true, bunun satır içi SVG olduğunu varsayın, mouseover etkinliğinizi SVG öğesine koymayın, etkinliğinizi SVG şekline getirin!

#what:hover { 
 
    fill: blue; 
 
}

<svg width="600px" height="600px" > 
 
    <circle id="what" cx="200" cy="200" r="100" fill='red'/> 
 
    </svg>

kaynak

2016-03-26 02:15:37

Gerçekten dairesel bir SVG düğmesi oluşturabilir misiniz?

cevap

İlgili konular