gpt4 book ai didi

javascript - 圆圈周围的链接文本

转载 作者:可可西里 更新时间:2023-11-01 13:37:34 24 4
gpt4 key购买 nike

我有两个这样设计的链接:

enter image description here

我正在努力寻找一个合适的解决方案。文本最好是 PNG 图像,但 SVG 格式的文本也是可以接受的。我还需要一个悬停状态,但这可以通过使用 png Sprite 或文本颜色来完成,所以这不是问题。最大的问题是创建适当的点击区域。

当涉及重叠链接/悬停区域时,HTML/CSS 只是有点方形和有限。

我查看了 SVG 解决方案,我还考虑过使用多个正方形作为“热点”或使用 CSS3 逐个字母旋转。

有没有人知道如何解决这个问题? IE9+ 支持会很好。

最佳答案

您可以简单地将其作为具有两个文本路径的 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>

关于javascript - 圆圈周围的链接文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12886434/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com