Как добавить ссылку внутри круга svg

Привет всем, я нарисовал круг, используя svg. этот круг имеет эффект hover effe, я хотел бы добавить ссылку внутри круга и для текста ссылки изменить цвет вместе с эффектом наведения. пожалуйста, найдите код ниже, я ценю помощь.Как добавить ссылку внутри круга svg

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

источник

2016-01-23 steamfunk

Фактический вопрос о связывании довольно легко ответ (как показано ниже), но это использование анимированные переходные черты штриховки довольно умны и заслуживают upvote :) – brichins

Вы должны добавить text элемент, завернутый в привязку.

Примечание: элемент 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>

источник

2016-01-23 20:04:18

Я думаю, что это будет работать:

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

источник

2016-01-23 19:59:03

Ну, спасибо, в любом случае, это помогло мне :) – David

очень просто! ..

просто обернуть всю SVG в ссылке ... это работало для меня все равно !!

инициализирует связь,
вставки .SVG,
близко .SVG,
тесная связь

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

источник

2017-03-03 09:58:54 prince

Как добавить ссылку внутри круга svg

ответ

Смежные вопросы