タグ

2021年8月31日のブックマーク (1件)

  • SVGでレイティングに使用するスター(星形)を実装するテクニックを解説

    Webページやスマホアプリで見かけるレイティングに使用するスター(星形)を実装するSVGのテクニックを紹介します。 一口にスターといってもさまざまな状態があり、オン・オフ、半分、アウトライン、サイズ変更など、さまざまな実装テクニックが解説されています。 Star Rating: An SVG Solution by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 実装の要件 スターを実装する基HTML アクセシビリティ SVGを再利用する方法 スターのスタイル 部分的なスターを実装する 1. SVGのmaskを使用した実装 2. SVGグラデーションを使用した実装 アウトラインスタイルのスターを実装する 1. SVGのmaskを使用した実装 2. SVGグラデーションを使用した実装 スタ

    SVGでレイティングに使用するスター(星形)を実装するテクニックを解説
    coliss
    coliss 2021/08/31
    Webページやスマホアプリで見かけるレイティングに使用するスター(星形)を実装するSVGのテクニック。