我有两个这样设计的链接:
我正在设法解决这个问题。文本最好是PNG图像,但是SVG中的文本也是可以接受的。我还需要一个悬停状态,但是可以通过使用png sprite或文本颜色来完成,所以这不是问题。最大的问题是创建适当的点击区域。
当涉及重叠的链接/悬停区域时,HTML / CSS只是有点方形且受限制。
我偷看了SVG解决方案,也考虑过使用多个正方形作为“热点”,或者使用CSS3逐个字母地旋转。
有人对如何解决这个问题有聪明的主意吗? IE9 +支持会很好。
最佳答案
您可以简单地将其作为具有两个textPath的svg进行操作,其中每个链接只是一个标记。点击区域将被自动计算。
这是一个example:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="700 0 500 500">
<title>Simple example of using links with svg textPaths</title>
<defs>
<style type="text/css">
text {
font: 50px sans-serif;
text-anchor: middle;
}
a:hover { fill: cornflowerblue; }
</style>
<path id="p1" d="M700 400a200 200 0 1 1 400 0"/>
<path id="p2" d="M700 400a200 200 0 1 1 400 0" transform="translate(0 50)"/>
</defs>
<text>
<a xlink:href="http://www.example.com/first">
<textPath xlink:href="#p1" startOffset="50%">First link</textPath>
</a>
<a xlink:href="http://www.example.com/second">
<textPath xlink:href="#p2" startOffset="50%">Second link</textPath>
</a>
</text>
</svg>