パーツ番号 02-13-05 ・ CSSのみ

円形バッジの縁取りテキスト

SVGのtextPathで円の縁に沿わせた回転文字列と、中央の固定ラベルを組み合わせたバッジ見本です。WordPressの認定マークや受賞バッジ表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<svg class="d02-13-05-svg" viewBox="0 0 160 160" width="160" height="160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <defs>
            <path id="d02-13-05-circle" d="M 80,80 m -58,0 a 58,58 0 1,1 116,0 a 58,58 0 1,1 -116,0" />
          </defs>
          <circle cx="80" cy="80" r="50" fill="#fef3c7" stroke="#f59e0b" stroke-width="2"></circle>
          <text font-size="12" font-weight="700" letter-spacing="2" fill="#92400e">
            <textPath href="#d02-13-05-circle" xlink:href="#d02-13-05-circle" startOffset="2%">HANDMADE IN JAPAN ・ QUALITY GUARANTEED ・</textPath>
          </text>
          <text x="80" y="86" text-anchor="middle" font-size="17" font-weight="800" fill="#92400e">承認済</text>
        </svg>

CSS

.d02-13-05{background:#fff}
        .d02-13-05-svg{display:block;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif}

クラス名 .d02-13-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。