Jak dodać link wewnątrz svg okręgu

Question

Witam wszystkich, które narysowałem okrąg za pomocą svg. ten krąg ma kształt zawisu, chciałbym dodać link wewnątrz koła i zmienić tekst linku wraz z efektem zawisu. znajdź poniższy kod i doceniam pomoc.

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

Trzeba dodać text element zawinięty w link zakotwiczenia.

Uwaga, element text znajdujący się na wierzchu circle zablokuje akcję najechania na ten okrąg. W związku z tym zawinąłem całą całość w grupie g i zamiast tego umieściłem przechwytywanie hover.

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

myślę, że to będzie działać:

<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

bardzo proste! ..

prostu owinąć całą SVG w linku ... to pracował dla mnie w każdym razie !!

1. zainicjowania łącza,
2. wkładka SVG,
3. blisko SVG,
4. ścisły związek

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