我使用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;
}
<svg id="circle">
<circle cx="125" cy="125" r="100" stroke="darkblue" stroke-width="3" fill="green" />
</svg>
答案 0 :(得分:17)
您需要添加一个包含在锚链接中的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;
}
&#13;
<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>
&#13;
答案 1 :(得分:8)
我认为这会奏效:
setDT(DF)[, c1 := as.character(cut(b1, breaks = dt_brk[grp == a1, brk])), by = a1]
DF
# a1 b1 c1
# 1: a 10.15 (0,25]
# 2: a 25.10 (25,50]
# 3: a 32.40 (25,50]
# 4: a 56.70 (50,70]
# 5: a 89.02 (70,Inf]
# 6: b 90.50 (50,Inf]
# 7: b 78.53 (50,Inf]
# 8: b 98.12 (50,Inf]
# 9: b 34.30 (0,50]
# 10: b 99.75 (50,Inf]
编辑:动态添加指向SVG <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>
的链接。
Circle
function addAnchor(){
var dummyElement = document.createElement("div");
dummyElement.innerHTML = '<a xlink:href="https://www.google.com" style="cursor: pointer" target="_blank"></a>';
var htmlAnchorElement = dummyElement.querySelector("a");
var circleSVG = document.getElementById("circle");
htmlAnchorElement.innerHTML = circleSVG.innerHTML;
circleSVG.innerHTML = dummyElement.innerHTML;
}
答案 2 :(得分:2)
非常简单!..
将整个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>