javascript - 圆圈周围的链接文本

Question

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

我正试图为此找到一个体面的解决方案。文本最好是 PNG 图像，但 SVG 中的文本也可以接受。我还需要一个悬停状态，但这可以通过使用 png sprite 或文本颜色来完成，所以这不是问题。最大的问题是创建适当的点击区域。

当涉及到重叠的链接/悬停区域时，HTML/CSS 只是有点方正和有限。

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

有没有人对如何解决这个问题有一个聪明的想法？IE9+ 支持会很好。

Answer 1

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

Answer 2

我有一个理论。如果你做了这样的事情怎么办：

1. 用文本创建一个容器
2. 在更高的 z-index 上创建副本
3. 创建一个纯白色的覆盖层，每个覆盖层都有精确的尺寸。（稍后使用）
4. css全部旋转-90

阅读本文以使图像以相反的方式倾斜。

http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

然后倾斜覆盖以匹配您问题中弯曲示例的外观。