3

次のように設計された 2 つのリンクがあります。

ここに画像の説明を入力

私はこれに対するまともな解決策に頭を悩ませようとしています。テキストは PNG 画像が望ましいですが、SVG 内のテキストも同様に許容されます。ホバー状態も必要ですが、png スプライトまたはテキスト カラーを使用して実行できるため、問題ありません。最大の問題は、適切なクリック領域を作成することです。

HTML/CSS はやや四角く、リンク/ホバー領域のオーバーラップに関しては制限があります。

私は SVG ソリューションをのぞき見しました。また、「ホットスポット」に複数の正方形を使用するか、CSS3 を使用して文字ごとに回転することも検討しました。

これを解決する方法について賢いアイデアを持っている人はいますか? IE9+ のサポートは素晴らしいでしょう。

4

2 に答える 2

2

これは、各リンクが単なる <a> タグである 2 つの textPath を持つ svg として簡単に実行できます。クリック領域は自動的に計算されます。

例を次に示します。

<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>
于 2012-10-15T10:37:28.607 に答える
0

私には理論があります。このようなことをした場合はどうなりますか？

  1. テキストでコンテナを作成する
  2. より高いz-indexに複製を作成する
  3. それぞれの正確な寸法で白一色のオーバーレイを作成します。（後で使用）
  4. cssはすべてで-90回転します

これを読んで、画像を反対方向に歪ませます。

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

次に、オーバーレイをスキューして一致させ、質問の曲がった例の外観を提供します。

于 2012-10-14T21:02:25.663 に答える