圈子周围的链接文字

时间:2012-10-14 20:54:20

标签: javascript html css svg textwrapping

我有两个设计如下的链接:

enter image description here

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

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

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

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

2 个答案:

答案 0 :(得分:2)

你可以简单地将其作为带有两个textPath的svg来实现,其中每个链接只是一个< a>标签。点击区域将自动计算。

这是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>

答案 1 :(得分:0)

我有一个理论。如果你这样做会怎么样:

  1. 使用文本
  2. 创建容器
  3. 在更高的z-index上创建副本
  4. 创建一个纯白色覆盖图,其中包含每个覆盖图的精确尺寸。 (稍后使用)
  5. css在所有
  6. 上旋转-90

    阅读此内容以使图像偏斜。

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

    然后将叠加层倾斜以匹配您的问题中的弯曲示例的外观。