Q&A
どういった水玉なのか手書きでいいので図示できませんか？
法則性はあるのでしょうか？ランダムなのでしょうか？
前提・実現したいこと
すごく久しぶりにコーディングしています。
SVGで波線で小さな水玉の背景を作りたいです。
波線まではできているのですが、そこを水玉にしたいときに、SVGの背景イメージの中にどうやって水玉模様を入れるのか悩んでいます。
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>test</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSS --> <style> html, body, .wrap { height: 100%; } .wrap { position: relative; } .svg-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } </style> </head> <body> <div class="wrap"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none" class="svg-bg"> <path d="M0,0 v50 q10,10 20,0 t20,0 t20,0 t20,0 t20,0 v-50 Z" fill="#3eba90"></path> </svg> </div> <!-- ここにコンテンツが入ります --> </body> </html>試したこと
fillに該当するところにどうやってイメージ画像をリピートしていれることができるのか悩んでいます。
補足情報（FW/ツールのバージョンなど）
こういう画像をトップのヘッダーにしたいです。
水玉はこういう感じです。
正確に言うと水玉ではなく、2ピクセルの正方形です。（ただデザインにそこまで忠実でなくていいので、極小の水玉ならOKです。
）
回答1件
0
ベストアンサー
とりあえず適当に水玉だしときました
投稿2020/07/21 02:15
総合スコア116724
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
<defs>
<pattern id="Pattern" x="0" y="0" width=".1" height=".1">
<circle cx="1" cy="1" r="1" fill="white" />
<circle cx="6" cy="6" r="1" fill="white" />
</pattern>
</defs>
<path d="M0,0 v50 q10,10 20,0 t20,0 t20,0 t20,0 t20,0 v-50 Z" fill="#3eba90"></path>
<rect fill="url(#Pattern)" x="0" y="0" width="100" height="100"/>
</svg>
ありがとうございます！！！すごく助かりましたm(__)m
あなたの回答
tips
プレビュー
