Java Swing Metal/Steel 風の背景 SVG編

<< 戻る   トップ >>

Java Swing Metal/Steel 風の背景について、CSS の linear-gradient を使って粘ってみたが、拡大してみると思った通りになっていないようなので、何かよい方法でもないかと考えた。そういえば、SVG ならばテキストで記述できて好都合そうだ。そこで、インラインの SVG を CSS の background-image に持って来る方法を調べたところ、「ぐーたら本舗」に「外部 CSS ファイルにインラインで SVG を埋め込む方法」として説明されていた。data: URL を使うんだって。

.rivet {
    background-image: url( "data:image/svg+xml, \
    <svg%20xmlns='http://www.w3.org/2000/svg'%20width='4'%20height='4'>\
      <rect%20x='0'%20y='0'%20width='1'%20height='1'%20fill='%23fff'/>\
      <rect%20x='1'%20y='1'%20width='1'%20height='1'%20fill='%230006'/>\
      <rect%20x='2'%20y='2'%20width='1'%20height='1'%20fill='%23fff'/>\
      <rect%20x='3'%20y='3'%20width='1'%20height='1'%20fill='%230006'/>\
    </svg>");
}

データ URLにおけるデータは %エンコードしなくてはならないそうで、可読性との妥協の結果上記のような記述になりにけり。

Metal/Steel テーマ風味

こちらを採用する。


作成: 2021-06-20 17:02:52更新: 2021-06-20 17:02:52
https://museo-anonimo.jp/nanban/?id=1552,https://museo-anonimo.jp/nanban/tr/1552