Làm thế nào để thêm một liên kết bên trong một vòng tròn svg

Question

Xin chào tất cả tôi đã vẽ một vòng tròn bằng cách sử dụng svg. vòng tròn này có ảnh hưởng di chuột, tôi muốn thêm một liên kết trong vòng tròn và cho văn bản liên kết thay đổi màu sắc cùng với hiệu ứng di chuột. xin vui lòng tìm mã dưới đây tôi đánh giá cao sự giúp đỡ.

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

Bạn cần phải thêm một 0.123.phần tử được bao bọc trong liên kết anchor.

Lưu ý, phần tử text, nằm trên đầu trang của circle sẽ chặn hành động di chuột trên vòng kết nối đó. Vì vậy, tôi đã bao bọc toàn bộ điều trong một nhóm g và đặt việc di chuột lên đó thay vào đó.

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

Tôi nghĩ rằng điều này sẽ làm việc:

<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

rất đơn giản! ..

chỉ quấn toàn bộ SVG trong một liên kết ... này làm việc cho tôi anyway !!

1. khởi tạo liên kết,
2. chèn svg,
3. gần svg,
4. liên kết chặt chẽ

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