流体シェイプ

簡易ツール

・SVG Shape Generator【https://www.softr.io/tools/svg-shape-generator】・・・横長のシェイプも作れる

・Blobmaker【https://www.blobmaker.app/】・・・思い通りにいかない

SVGの上にテキストを載せる

<svg viewBox= ...>
    <a xlink:href="https://yahoo.com/">
        <defs></defs>
        <path></path>
        <text x="40" y="60">もっとみる</text>
    </a>
</svg>

svgタグの中にaタグをいれることで、流体シェイプのボタンがつくれます

text {
    fill: #fff;  // フォントカラー
    font-size: 3px;
    letter-spacing: 1px;
}

textタグはfont-sizeではなくfillでフォントカラーを指定します

SVGの周りに余白ができてしまう場合

SVGタグ内にviewBoxというプロパティがあり、

viewBox = [x座標] [y座標] [幅] [高さ]

となっています。

これらの値を変えることで、大きさや画像の位置を変えることができます。