HTMLにSVG画像を埋め込むサンプル2

SVGのサンプルの続き

SVG要素 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>SVGのサンプル</title> </head> <body> <svg x="100"...

二次ベジェ曲線
三次ベジェ曲線
PATHを使った図形
アイコンぽい物

二次ベジェ曲線

pathでベジェ曲線を描画していて曲線部分になります。

<path d="M 32 32 S 128 48 32 64" stroke="black" stroke="black" fill="transparent" stroke-width="2" />

三次ベジェ曲線

二次ベジェ曲線と同じくpathでベジェ曲線を描画していて曲線部分になります。

<path d="M 32 32 C 128 64 128 96 32 128" stroke="black" stroke="black" fill="transparent" stroke-width="2" />

PATHを使った図形

<path d="M 32 32 L 128 32 S 180 64 128 96 L 32 96 Z" stroke="black" stroke="black" fill="transparent" stroke-width="2" />

M 32 32でx:32,y32へ移動。L 128 32でx:128,y:32へ直線を引く、次はベジェ曲線、再び直線、最後のZでPATHを閉じています。

アイコンぽい物

<svg width="256" height="256" style="background-color: transparent">
    <circle cx="128" cy="128" r="96" stroke="orange" stroke-width="4", fill="white" />
    <path id="p1" d="M 192,128 a 64 64 0 0 1 -128, 0" stroke="orange" stroke-width="4", fill="white" />
    <path id="p2" d="M 64,128 a 64 64 180 0 1 128, 0" stroke="orange" stroke-width="4", fill="orange" />
    <path id="p3" d="M 64,128 L 194 128" stroke="orange" stroke-width="4", fill="white" />
    <text font-size="14" stroke="black" dy="-10">
        <textpath xlink:href="#p1">
            https://www.mayworks.net
        </textpath>
    </text>
    <text font-size="20 " stroke="black" dy="-10" dx="48">
        <textpath xlink:href="#p2">
            迷惑堂本舗
        </textpath>
    </text>
    <text font-size="48" stroke="white" dy="-8" dx="16">
        <textpath xlink:href="#p3">
            ８４
        </textpath>
    </text>
</svg>