ReflexKR

コンポーネント工房：Reflexライブラリ100

講座の概要

レイアウト

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

タイポグラフィ

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

フォーム

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

データ表示

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

開閉と切り替え

Tabs

Accordion

Segmented Control

オーバーレイ

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

動的レンダリング

Cond

Match

Foreach

Auto Scroll

メディア

Image

Audio

Video

表とデータグリッド

Table

Data Table

Data Editor

チャート

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

チャートの部品

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

ほかのチャートライブラリ

Plotly

Pyplot

HTML要素

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

そのほかの道具

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

コンポーネント工房：Reflexライブラリ100

HTML要素

SVG

rx.el.svgrx.el.svg.circlerx.el.svg.defsrx.el.svg.linear_gradientrx.el.svg.polygonrx.el.svg.pathrx.el.svg.rectrx.el.svg.stop

公式ドキュメント

工房の注文書

認証バッジの画像をひとつ：グラデーションの円の上に星、その上にチェックマークを、画像ファイルを使わずにコードで描いてください。

SVG は座標で描くベクター画像です。どれだけ拡大しても崩れず、コードで形や色を変えられます。 rx.el.svgがキャンバスで、その中の図形はrx.el.svg.circle、rx.el.svg.rectのようにrx.el.svg名前空間に入っています。

rx.el.svg(
    rx.el.svg.circle(cx=50, cy=50, r=40, fill=rx.color("indigo", 9)),
    view_box="0 0 100 100",
    width="100",
    height="100",
)

プロパティを変えてみる

図形は位置・サイズの属性で形を、fill（塗り）・stroke（線）で色を決めます。値はview_boxの座標系での数値です。

プロパティを変えてみる

rect_width

corner

radius

fill

stroke

stroke_width

rx.el.svg(
    rx.el.svg.rect(
        x="10",
        y="10",
        width="100",
        height="80",
        rx="10",
        fill="#6e56cf",
        stroke="none",
        stroke_width="4",
    ),
    rx.el.svg.circle(cx="160", cy="50", r="35", fill="#6e56cf", fill_opacity="0.6", stroke="none", stroke_width="4"),
    view_box="0 0 220 100",
    width="264",
    height="120",
)

rect の rx は角の丸み、circle の r は半径です。fill を none にすると線だけが残ります。

プロパティ	値	既定値	用途
`view_box` `width` `height` (svg)	`"0 0 100 100"` / 長さ	なし	画像の座標系と画面上のサイズ
`preserve_aspect_ratio` (svg)	`"xMidYMid meet"` `"none"` …	`"xMidYMid meet"`	比率が違うときの合わせ方
`cx` `cy` `r` (circle)	数値	`0`	中心と半径
`x` `y` `width` `height` `rx` `ry` (rect)	数値	`0`	位置、サイズ、角。`rx`だけ渡すと`ry`も同じになる
`points` (polygon)	`"x,y x,y …"`	なし	頂点のリスト。終点は自動で閉じる
`d` (path)	パスコマンド	なし	`M`移動、`L`直線、`Q`・`C`曲線、`Z`閉じる
`path_length`（図形共通）	数値	実際の長さ	線の長さをこの値とみなす（破線の計算用）
`id` `x1` `y1` `x2` `y2` (linear_gradient)	文字列・数値	左→右	グラデーションの名前と方向
`gradient_units` `gradient_transform` `spread_method` `href` (linear_gradient)	文字列	なし	座標の基準、変形、端の処理、別のグラデーションの継承
`offset` `stop_color` `stop_opacity` (stop)	`"0%"`~~`"100%"` / 色 / 0~~1	なし	色を置く位置と色
`fill` `stroke` `stroke_width` …	色・数値	黒の塗り	図形固有の属性ではなく CSS として入る（下記）

キャンバス：svg と view_box

view_box="0 0 100 100"は「内側の座標は縦横 100」という意味で、width・heightは画面上のサイズです。同じ画像をサイズだけ変えて描いても鮮明です。比率が違うと既定では中央に合わせて縮め、preserve_aspect_ratio="none"なら引き伸ばして埋めます（3つ目の画像）。

rx.el.div(
    rx.el.svg(
        rx.el.svg.rect(x=0, y=0, width=100, height=100, fill=rx.color("gray", 4)),
        rx.el.svg.circle(cx=50, cy=50, r=30, fill=rx.color("tomato", 9)),
        view_box="0 0 100 100",
        width="60",
        height="60",
    ),
    rx.el.svg(
        rx.el.svg.rect(x=0, y=0, width=100, height=100, fill=rx.color("gray", 4)),
        rx.el.svg.circle(cx=50, cy=50, r=30, fill=rx.color("tomato", 9)),
        view_box="0 0 100 100",
        width="120",
        height="120",
    ),
    rx.el.svg(
        rx.el.svg.rect(x=0, y=0, width=100, height=100, fill=rx.color("gray", 4)),
        rx.el.svg.circle(cx=50, cy=50, r=30, fill=rx.color("tomato", 9)),
        view_box="0 0 100 100",
        preserve_aspect_ratio="none",
        width="200",
        height="80",
    ),
    display="flex",
    gap="16px",
    align_items="end",
)

基本の図形

rect、circle、polygonが公式ドキュメントに出てくる図形で、Reflex 0.10 にはellipse、line、polyline、g、textのような要素も入っています。 0.10 ではfill・stroke・stroke_widthは図形の属性リストにないため、CSS として入ります。SVG の色の属性は CSS でもまったく同じように動くので結果は同じで、rx.color(...)のようなテーマの色も使えます。

rx.el.svg(
    rx.el.svg.rect(x=10, y=20, width=60, height=60, rx=12, fill=rx.color("teal", 9)),
    rx.el.svg.circle(cx=120, cy=50, r=30, fill=rx.color("amber", 9)),
    rx.el.svg.polygon(points="200,20 230,80 170,80", fill=rx.color("crimson", 9)),
    rx.el.svg.ellipse(cx=290, cy=50, rx=40, ry=22, fill=rx.color("blue", 9)),
    rx.el.svg.line(x1=10, y1=95, x2=330, y2=95, stroke="gray", stroke_width=2),
    view_box="0 0 340 100",
    width="340",
    height="100",
)

path：自由な線

dにコマンドを続けて書きます。M10 80でペンを移動し、Qは2次曲線、Tは前の曲線をなめらかにつなぎます。線だけを描くならfill="none"です。 path_length=100は長さを 100 とみなさせるので、stroke_dasharray="10 5"のような破線を比率で計算しやすくなります。

rx.el.svg(
    rx.el.svg.path(
        d="M10 80 Q 55 10, 100 80 T 190 80",
        fill="none",
        stroke=rx.color("indigo", 9),
        stroke_width=4,
    ),
    rx.el.svg.path(
        d="M10 95 L 190 95",
        path_length=100,
        stroke="gray",
        stroke_width=3,
        stroke_dasharray="10 5",
    ),
    view_box="0 0 200 100",
    width="300",
    height="150",
)

グラデーション：defs、linear_gradient、stop

defsの中に置いたものはすぐには描かれず、名前（id）で呼び出して使う素材になります。linear_gradientのx1・y1→x2・y2が方向で、stopが色を置く位置です。図形のfillに"url(#id)"を渡すと、グラデーションで塗られます。idはページ内で重複しないように付けます。

rx.el.svg(
    rx.el.svg.defs(
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="0%", stop_color="#6e56cf"),
            rx.el.svg.stop(offset="100%", stop_color="#e54d2e", stop_opacity="0.8"),
            id="htmlsvg_sunset",
            x1="0",
            y1="0",
            x2="1",
            y2="1",
        ),
    ),
    rx.el.svg.rect(x=0, y=0, width=200, height=100, rx=16, fill="url(#htmlsvg_sunset)"),
    view_box="0 0 200 100",
    width="240",
    height="120",
)

State で描く

図形の属性に State の値を入れると、画像がデータに追従します。rx.foreachの2つ目の引数（順番）で棒のxを計算しました。

import random


class HtmlSvgBarState(rx.State):
    values: list[int] = [40, 75, 55, 90, 30]

    @rx.event
    def shuffle(self):
        self.values = [random.randint(10, 95) for _ in self.values]


rx.el.div(
    rx.el.svg(
        rx.foreach(
            HtmlSvgBarState.values,
            lambda v, i: rx.el.svg.rect(x=i * 40 + 10, y=100 - v, width=28, height=v, rx=4, fill=rx.color("grass", 9)),
        ),
        view_box="0 0 210 100",
        width="210",
        height="100",
    ),
    rx.el.button("Shuffle", on_click=HtmlSvgBarState.shuffle, padding="4px 12px", border="1px solid gray", border_radius="6px", margin_top="8px"),
)

注文書を仕上げる

defsのグラデーションで円を塗り、頂点10個のpolygonで星を、端を丸めたpathでチェックを重ねました。

rx.el.svg(
    rx.el.svg.defs(
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="0%", stop_color="#3e63dd"),
            rx.el.svg.stop(offset="100%", stop_color="#12a594"),
            id="htmlsvg_badge",
            x1="0",
            y1="0",
            x2="0",
            y2="1",
        ),
    ),
    rx.el.svg.circle(cx=60, cy=60, r=56, fill="url(#htmlsvg_badge)"),
    rx.el.svg.polygon(points="60,18 70,44 98,46 76,63 84,90 60,75 36,90 44,63 22,46 50,44", fill="#ffd60a"),
    rx.el.svg.path(d="M44 62 L56 74 L78 50", fill="none", stroke="white", stroke_width=6, stroke_linecap="round", stroke_linejoin="round"),
    view_box="0 0 120 120",
    width="120",
    height="120",
)

工房ノート

rx.el.svg がキャンバス：view_box は内側の座標、width・height は画面上のサイズ。
図形は rx.el.svg.rect・circle・polygon・path、0.10 には ellipse・line・g・text も。
fill・stroke は 0.10 では CSS として入るが、結果は同じ。テーマの色 rx.color も使える。
グラデーションは defs > linear_gradient(id) > stop、使う側は fill="url(#id)"。
属性に State の値を入れ、rx.foreach で図形を作るとデータの図になる。

← 前へ

HTML要素 · HTML Tables

そのほかの道具 · Theme

新しい授業・講座のお知らせを受け取る

この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。

質問と回答

この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。

ReflexKR

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex