🍒 💠 👨🏾‍🏭 このSVGは常に今日の日付を表示します。 🤯 😃 🚓

連絡先の詳細ページには、人々が私の日記を見ることができるように、標準のカレンダーアイコンが必要でした。このようなアイコンは、ほぼ常に紙のカレンダーのように機能します。しかし、動的アイコンを追加する場合、カレンダーをもう少し便利にできるかどうか疑問に思っていました。

そして、今日の日付を常に表示するSVGカレンダーです。

背景画像はTwitterアイコンTweMojiカレンダーに基づいています-CC -BY

SVGでのテキストサポートは少し厄介なので、どのようにそれを行ったか説明させてください。

SVGはJavaScriptをサポートしています。これは、イメージをロードした直後に開始されます。

<svg onload="init(evt)" xmlns="http://www.w3.org/2000/svg" aria-label="Calendar" role="img" viewBox="0 0 512 512">

次のステップは、異なる日付文字列を取得することです。私は英国にいるので、英国ロケールen-GBを使用します。

 <script type="text/ecmascript"><![CDATA[ function init(evt) { var time = new Date(); var locale = "en-gb";

「日曜日25 FEB」のようなものが必要です。ロケール設定は短い名前と長い名前をサポートしているため、「SUN 25 February」を選択できます。

  var DD = time.getDate(); var DDDD = time.toLocaleString(locale, {weekday: "long"}); var MMM = time.toLocaleString(locale, {month: "short"});

最後に、画像にテキストを追加します。

  var svgDocument = evt.target.ownerDocument; var dayNode = svgDocument.createTextNode(DD); svgDocument.getElementById("day").appendChild(dayNode); var weekdayNode = svgDocument.createTextNode(DDDD); svgDocument.getElementById("weekday").appendChild(weekdayNode); var monthNode = svgDocument.createTextNode(MMM.toUpperCase()); svgDocument.getElementById("month").appendChild(monthNode); } ]]></script>

テキストの配置は比較的簡単です。 XおよびY座標はテキストの下側の境界線にスナップされます-gなどの下位の拡張要素を持つ文字はY座標を超えることに注意してくださいここで、テキストの色、サイズ、フォントを設定します。

レイアウトは、等幅フォントで最も簡単です。

 <text id="month" x="32" y="164" fill="#fff" font-family="monospace" font-size="140px" style="text-anchor: left"></text>

アライメントについて。テキストを中央に配置するには、 style="text-anchor: middle"指定します。

予備テストでは、このSVGがすべてのデスクトップブラウザーとAndroidブラウザーで機能することが示されました。 iPhoneやその他のエキゾチックなデバイスではテストしませんでした。

お楽しみください！

このSVGは常に今日の日付を表示します。

More articles: