एक एसवीजी सर्कल के अंदर एक लिंक कैसे जोड़ें

Question

हैलो सब मैंने svg का उपयोग करके एक सर्कल खींचा है। इस सर्कल में एक होवर effe है, मैं सर्कल में और लिंक टेक्स्ट के लिए होवर प्रभाव के साथ रंग बदलने के लिए एक लिंक जोड़ना चाहता हूं। कृपया नीचे दिए गए कोड को ढूंढें, मैं सहायता की सराहना करता हूं।

एचटीएमएल

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

सीएसएस

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

आप एक 0,123,686 जोड़ने की जरूरत एंकर लिंक में लिपटेतत्व।

नोट, text तत्व, circle के शीर्ष पर होने पर, उस मंडली पर होवर कार्रवाई को अवरुद्ध कर देगा। इसलिए, मैंने पूरी चीज को g समूह में लपेट लिया है और इसके बजाय होवर कैप्चर रखा है।

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

मुझे लगता है कि यह काम करेगा:

<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

बहुत ही सरल! ..

सिर्फ एक कड़ी में पूरे एसवीजी लपेट ... इस वैसे भी मेरे लिए काम किया !!

1. लिंक आरंभ,
2. डालने svg,
3. पास svg,
4. पास लिंक

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