Nasıl bir svg daire içine bir bağlantı eklemek için

Question

Merhaba tüm svg kullanarak bir daire çizdim. Bu daire bir gezinti efekti içerir, daire içinde bir bağlantı eklemek ve bağlantı metni için hover efekti ile birlikte rengi değiştirmek istiyorum. Lütfen aşağıdaki kodu bularak yardımın değerini takdir ediyorum.

HTML

<svg id="circle"> 
    <circle cx="125" cy="125" r="100" stroke="darkblue" stroke-width="3"  fill="green" /> 
</svg> 

CSS

svg#circle { 
    height: 250px; 
    width: 250px; 
} 

circle { 
    stroke-dasharray: 700; 
    stroke-dashoffset: 700; 
    stroke-linecap: butt; 
    -webkit-transition: all 2s ease-out; 
    -moz-transition: all 2s ease-out; 
    -ms-transition: all 2s ease-out; 
    -o-transition: all 2s ease-out; 
    transition: all 2s ease-out; 
} 

circle:hover { 
    fill: pink; 
    stroke-dashoffset: 0; 
    stroke-dasharray: 700; 
    stroke-width: 10; 
} 

Answer 1

Bireklemem gerekiyor Bir bağlantı bağlantısına sarılmışöğesi.

Not circle'un üstünde bulunan text öğesinin, bu daire üzerindeki gezinme eylemini engelleyeceğini unutmayın. Yani, ben her şeyi bir g grubunda tamamladım ve bunun üzerine vurgulu yakalamayı yerleştirdim.

svg#circle { 
 
    height: 250px; 
 
    width: 250px; 
 
} 
 
g circle { 
 
    stroke-dasharray: 700; 
 
    stroke-dashoffset: 700; 
 
    stroke-linecap: butt; 
 
    -webkit-transition: all 2s ease-out; 
 
    -moz-transition: all 2s ease-out; 
 
    -ms-transition: all 2s ease-out; 
 
    -o-transition: all 2s ease-out; 
 
    transition: all 2s ease-out; 
 
} 
 
g:hover circle { 
 
    fill: pink; 
 
    stroke-dashoffset: 0; 
 
    stroke-dasharray: 700; 
 
    stroke-width: 10; 
 
} 
 
text { 
 
    fill: pink; 
 
    font-size: 24px; 
 
} 
 
a:hover text { 
 
    fill: blue; 
 
}

<svg id="circle"> 
 
    <g> 
 
    <circle cx="125" cy="125" r="100" stroke="darkblue" stroke-width="3" fill="green" /> 
 
    <a xlink:href="https://www.google.co.uk/" target="_top"> 
 
    <text x="50%" y="50%" style="text-anchor: middle">google</text> 
 
    </a> 
 
    </g> 
 
</svg>

Answer 2

Bu çalışır düşünüyorum:

<svg id="circle"> 
 
    <a xlink:href="https://www.google.com" style="cursor: pointer" target="_blank"> 
 
    <circle cx="125" cy="70" r="60" stroke="darkblue" stroke-width="3" fill="green" /> 
 
    </a> 
 
</svg>

Answer 3

çok basit! ..

yalnızca bir bağlantı içinde bütün SVG sar ... Bu zaten benim için çalıştı !!

1. linki initialize,
2. insert svg,
3. yakın svg,
4. yakın bağlantı

<a href="http://stackoverflow.com/questions/34968082/how-to-add-a-link-inside-an-svg-circle#"> <svg style="align-self: center" height="125" width="190" </a>> 
 
    <defs> 
 
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
 
    <stop offset="3%" style="stop-color:rgb(255,255,0);stop-opacity:0" /> 
 
    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
 
    </linearGradient> 
 
    </defs> 
 
    <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /> 
 
    
 
    <text fill="#000066" font-size="40" font-family="Verdana" x="50" y="86">MBS</text> 
 
    Sorry, your browser does not support SVG. 
 
    </svg> </a>