SVGによるイメージマップ

あなたが十分に長いフロントエンド開発の分野にあったならば、あなたはテーブルから作られたレイアウトを覚えているかもしれません.CSSはその時点でずっと原始的だったので、SVGはおそらくどんなブラウザでもサポートされておらず、JavaScript DHTML(Dynamic HTML)と呼ばれる人も多かった.
HTMLにはmapというタグがあります.ウェブページがHTMLとCSSにしばしば切られなかったとき、それは重く使われました、しかし、ちょうど1つのイメージは他のページにリンクするためにマークされました.それはあなたがイメージの部分をマークして、href(そして、それがあなたが必要とするものであるならば、onclick)を付けることができます、したがって、ユーザーが特定の領域をクリックするとき、それは標準的なリンクのように振る舞うでしょう.
Read about map on MDN.

問題

最近、我々はplatformOS.comウェブサイトをリファクタリングしました.値ページには、適切に配置されたラベルが適切なコンテンツにリンクされているイメージがありました.

これは、CSS position: absoluteと異なるスクリーン上の位置を設定するメディアクエリで行われました.私はそれを残すことができました、しかし、リファクタがTarwindCSS(両方のメンテナンスとパフォーマンス理由のために)の書き直しを含むので、私は若干の研究をすることに決めました.

解決策

最初に、私は以前に述べたイメージマップを試みました、しかし、それはSVGの中で働きませんでした.それから、私はあなたがSVGの関連をすることができるということを発見しました.SVGのすべての要素はxとy座標を持っていなければならないので、a関連はHTMLイメージmapに類似した特徴を持っています.
SVG内部のリンクはHTMLリンクと非常に似ています.

<a href="https://www.platformos.com">
    <text x="10" y="25">platformOS - Limitless development platform</text>
</a>

これは、例えば、あなたがそれを貼り付けるたびにリンクを使用する必要はありませんので、あなたのロゴSVGにリンクを埋め込むことが可能性を与えます.私は、1つのイメージの中に我々の価値を持っていて、すべてのブレークポイントでラベルを位置させるためにメディア質問に対処しなければならないためにそれを使うことに決めました.
例:

<svg class="w-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1355.94 410.97">
  <g id="Performance">
    <a xlink:href="#performance">
      <rect x="598.2" width="167.65" height="26" fill="#d50037"></rect>
      <g>
        <!-- Letters -->
      </g>
    </a>
  </g>
</svg>

SVGのフルバージョンのためにこのページを検査してください(インラインになっています).
私は、あなたがmapタグを覚えていることを願っています.

https://www.platformos.com/values 続きを読む

あなたがより多くのパフォーマンス指向のコンテンツに興味を持っている場合は、私に従って、私はあなたのウェブサイトを改善するためのオリジナル、または少なくとも効果的な方法を提供することを約束します.

既存のWebページでのWebPの使用

パウサウカワラルスキー・ Nov 17・ 4分読む

#webperf #design

Webのための画像の最適化

パウサウカワラルスキー・ 4月24日・ 8分読

#beginners #node