インタラクティブなウェブページを作成しています。主要部分は SVG マップです。このマップには最大 600 個のテキスト ラベルがあり、これらのテキスト ラベルには現在いくつかのクラスがあります。現在の例は以下のとおりです
<text class="UCWF left base" x="1513.8158" y="733.91864"><tspan x="1513.8158" y="733.91864">Canary Wharf</tspan></text>
クラス属性「ＵＣＷＦ」は、固有の局コードである。(駅に固有ですが、駅自体を表す長方形もあるため、この情報を id タグに移動することはできません。) 2 番目のエントリは、駅のスタイリングをテキストの左側に設定します。最後の部分は、駅名の上か下かを示します。(背景の上に表示されるように 2 つあるものもあります) これはすでに厄介な解決策のように見え、さらに悪化しようとしています。各駅に車いす対応の段差がないか、自転車乗り入れ可能かなどの情報を追加したいと思います。私にとって明らかな解決策は、これをデータ属性として追加することです
data-cycle="true" data-wheelchair="false"
ただし、この情報は、テキストのスタイリングに影響を与えるためにのみ使用します。車いすとマークされたボタンを選択すると、車いすでアクセスできないすべての駅が灰色に設定され、その他の駅は黒に設定されるため、これは当然、クラスとスタイルの問題として分類されます。重要な質問は、この機能がスタイリングに属しているのか、それともデータに属しているのかということです。選択から将来的に制限される可能性はありますか。どちらもうまくいくと思います。背景として、私は Web コーディングは初めてですが、可能な場合はベストプラクティスに従うことに興味があります