logo标签列表

围绕圆形链接的文本

javascripthtmlcsssvgword-wrap
3

我有两个链接的设计如下图：

enter image description here

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

对于重叠的链接/悬停区域，HTML/CSS只略显平凡和有限。

我瞥了一眼SVG解决方案，也考虑过使用多个正方形作为“热点”，或者使用CSS3逐字旋转。

有没有聪明的想法来解决这个问题？支持IE9以上将会更好。

也许，只是也许，可以使用border-radius创建两个圆，并使用position将它们放置。 - Jawad
你可以使用Lettering.JS和一些CSS变换来定位和旋转每个字母围绕一个圆形。 - Pointy
在正方形图像上使用多边形区域地图可行吗？ - Asad Saeeduddin
2个回答
2

您可以使用两个textPath创建一个简单的svg图形，其中每个链接仅是一个<a>标签。单击区域将自动计算。

这里是一个示例：

<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>
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接