SVG

简单的 SVG FT 元素

from nbdev.showdoc import show_doc

你可以直接从字符串创建 SVG，例如（一如既往，使用 NotStr 或 Safe 来告诉 FastHTML 不要转义文本）

svg = '<svg width="50" height="50"><circle cx="20" cy="20" r="15" fill="red"></circle></svg>'
show(NotStr(svg))

你也可以使用像 fa6-icons 这样的库。

要使用 Python API 创建和修改 SVG，请使用下面讨论的 fasthtml.svg 中的 FT 元素。

注意：fasthtml.common 不会自动导出 SVG 元素。要访问它们，你需要像这样导入 fasthtml.svg

from fasthtml.svg import *

---

源代码

Svg

 Svg (*args, viewBox=None, h=None, w=None, height=None, width=None,
      xmlns='http://www.w3.org/2000/svg', **kwargs)

一个 SVG 标签；xmlns 会自动添加，如果未提供 viewBox，则默认为 height 和 width

要创建自己的 SVG，请使用 SVG。如果未提供 viewBox，它将自动根据 height 和 width 进行设置。

我们所有的形状都将通过使用 ft_svg 添加一些方便的关键字参数 (kwargs)

---

源代码

ft_svg

 ft_svg (tag:str, *c, transform=None, opacity=None, clip=None, mask=None,
         filter=None, vector_effect=None, pointer_events=None,
         target_id=None, hx_vals=None, hx_target=None, id=None, cls=None,
         title=None, style=None, accesskey=None, contenteditable=None,
         dir=None, draggable=None, enterkeyhint=None, hidden=None,
         inert=None, inputmode=None, lang=None, popover=None,
         spellcheck=None, tabindex=None, translate=None, hx_get=None,
         hx_post=None, hx_put=None, hx_delete=None, hx_patch=None,
         hx_trigger=None, hx_swap=None, hx_swap_oob=None, hx_include=None,
         hx_select=None, hx_select_oob=None, hx_indicator=None,
         hx_push_url=None, hx_confirm=None, hx_disable=None,
         hx_replace_url=None, hx_disabled_elt=None, hx_ext=None,
         hx_headers=None, hx_history=None, hx_history_elt=None,
         hx_inherit=None, hx_params=None, hx_preserve=None,
         hx_prompt=None, hx_request=None, hx_sync=None, hx_validate=None,
         hx_on_blur=None, hx_on_change=None, hx_on_contextmenu=None,
         hx_on_focus=None, hx_on_input=None, hx_on_invalid=None,
         hx_on_reset=None, hx_on_select=None, hx_on_submit=None,
         hx_on_keydown=None, hx_on_keypress=None, hx_on_keyup=None,
         hx_on_click=None, hx_on_dblclick=None, hx_on_mousedown=None,
         hx_on_mouseenter=None, hx_on_mouseleave=None,
         hx_on_mousemove=None, hx_on_mouseout=None, hx_on_mouseover=None,
         hx_on_mouseup=None, hx_on_wheel=None, hx_on__abort=None,
         hx_on__after_on_load=None, hx_on__after_process_node=None,
         hx_on__after_request=None, hx_on__after_settle=None,
         hx_on__after_swap=None, hx_on__before_cleanup_element=None,
         hx_on__before_on_load=None, hx_on__before_process_node=None,
         hx_on__before_request=None, hx_on__before_swap=None,
         hx_on__before_send=None, hx_on__before_transition=None,
         hx_on__config_request=None, hx_on__confirm=None,
         hx_on__history_cache_error=None, hx_on__history_cache_miss=None,
         hx_on__history_cache_miss_error=None,
         hx_on__history_cache_miss_load=None, hx_on__history_restore=None,
         hx_on__before_history_save=None, hx_on__load=None,
         hx_on__no_sse_source_error=None, hx_on__on_load_error=None,
         hx_on__oob_after_swap=None, hx_on__oob_before_swap=None,
         hx_on__oob_error_no_target=None, hx_on__prompt=None,
         hx_on__pushed_into_history=None, hx_on__replaced_in_history=None,
         hx_on__response_error=None, hx_on__send_abort=None,
         hx_on__send_error=None, hx_on__sse_error=None,
         hx_on__sse_open=None, hx_on__swap_error=None,
         hx_on__target_error=None, hx_on__timeout=None,
         hx_on__validation_validate=None, hx_on__validation_failed=None,
         hx_on__validation_halted=None, hx_on__xhr_abort=None,
         hx_on__xhr_loadend=None, hx_on__xhr_loadstart=None,
         hx_on__xhr_progress=None)

创建一个标准的 FT 元素，并带有一些 SVG 特定的属性

基本形状

我们将定义一个简单的函数，以便在这个 notebook 中显示 SVG 形状

def demo(el, h=50, w=50): return show(Svg(h=h,w=w)(el))

---

源代码

矩形 (Rect)

 Rect (width, height, x=0, y=0, fill=None, stroke=None, stroke_width=None,
       rx=None, ry=None, transform=None, opacity=None, clip=None,
       mask=None, filter=None, vector_effect=None, pointer_events=None,
       target_id=None, hx_vals=None, hx_target=None, id=None, cls=None,
       title=None, style=None, accesskey=None, contenteditable=None,
       dir=None, draggable=None, enterkeyhint=None, hidden=None,
       inert=None, inputmode=None, lang=None, popover=None,
       spellcheck=None, tabindex=None, translate=None, hx_get=None,
       hx_post=None, hx_put=None, hx_delete=None, hx_patch=None,
       hx_trigger=None, hx_swap=None, hx_swap_oob=None, hx_include=None,
       hx_select=None, hx_select_oob=None, hx_indicator=None,
       hx_push_url=None, hx_confirm=None, hx_disable=None,
       hx_replace_url=None, hx_disabled_elt=None, hx_ext=None,
       hx_headers=None, hx_history=None, hx_history_elt=None,
       hx_inherit=None, hx_params=None, hx_preserve=None, hx_prompt=None,
       hx_request=None, hx_sync=None, hx_validate=None, hx_on_blur=None,
       hx_on_change=None, hx_on_contextmenu=None, hx_on_focus=None,
       hx_on_input=None, hx_on_invalid=None, hx_on_reset=None,
       hx_on_select=None, hx_on_submit=None, hx_on_keydown=None,
       hx_on_keypress=None, hx_on_keyup=None, hx_on_click=None,
       hx_on_dblclick=None, hx_on_mousedown=None, hx_on_mouseenter=None,
       hx_on_mouseleave=None, hx_on_mousemove=None, hx_on_mouseout=None,
       hx_on_mouseover=None, hx_on_mouseup=None, hx_on_wheel=None,
       hx_on__abort=None, hx_on__after_on_load=None,
       hx_on__after_process_node=None, hx_on__after_request=None,
       hx_on__after_settle=None, hx_on__after_swap=None,
       hx_on__before_cleanup_element=None, hx_on__before_on_load=None,
       hx_on__before_process_node=None, hx_on__before_request=None,
       hx_on__before_swap=None, hx_on__before_send=None,
       hx_on__before_transition=None, hx_on__config_request=None,
       hx_on__confirm=None, hx_on__history_cache_error=None,
       hx_on__history_cache_miss=None,
       hx_on__history_cache_miss_error=None,
       hx_on__history_cache_miss_load=None, hx_on__history_restore=None,
       hx_on__before_history_save=None, hx_on__load=None,
       hx_on__no_sse_source_error=None, hx_on__on_load_error=None,
       hx_on__oob_after_swap=None, hx_on__oob_before_swap=None,
       hx_on__oob_error_no_target=None, hx_on__prompt=None,
       hx_on__pushed_into_history=None, hx_on__replaced_in_history=None,
       hx_on__response_error=None, hx_on__send_abort=None,
       hx_on__send_error=None, hx_on__sse_error=None,
       hx_on__sse_open=None, hx_on__swap_error=None,
       hx_on__target_error=None, hx_on__timeout=None,
       hx_on__validation_validate=None, hx_on__validation_failed=None,
       hx_on__validation_halted=None, hx_on__xhr_abort=None,
       hx_on__xhr_loadend=None, hx_on__xhr_loadstart=None,
       hx_on__xhr_progress=None)

一个标准的 SVG rect 元素

我们所有的形状都只是创建常规的 FT 元素。它们中的大多数提供的唯一额外功能是添加额外的已定义关键字参数，以改善 IDE 和 notebook 中的自动补全，并重新排序参数，以便也可以使用位置参数来节省一些输入，例如

demo(Rect(30, 30, fill='blue', rx=8, ry=8))

---

源代码

圆形 (Circle)

 Circle (r, cx=0, cy=0, fill=None, stroke=None, stroke_width=None,
         transform=None, opacity=None, clip=None, mask=None, filter=None,
         vector_effect=None, pointer_events=None, target_id=None,
         hx_vals=None, hx_target=None, id=None, cls=None, title=None,
         style=None, accesskey=None, contenteditable=None, dir=None,
         draggable=None, enterkeyhint=None, hidden=None, inert=None,
         inputmode=None, lang=None, popover=None, spellcheck=None,
         tabindex=None, translate=None, hx_get=None, hx_post=None,
         hx_put=None, hx_delete=None, hx_patch=None, hx_trigger=None,
         hx_swap=None, hx_swap_oob=None, hx_include=None, hx_select=None,
         hx_select_oob=None, hx_indicator=None, hx_push_url=None,
         hx_confirm=None, hx_disable=None, hx_replace_url=None,
         hx_disabled_elt=None, hx_ext=None, hx_headers=None,
         hx_history=None, hx_history_elt=None, hx_inherit=None,
         hx_params=None, hx_preserve=None, hx_prompt=None,
         hx_request=None, hx_sync=None, hx_validate=None, hx_on_blur=None,
         hx_on_change=None, hx_on_contextmenu=None, hx_on_focus=None,
         hx_on_input=None, hx_on_invalid=None, hx_on_reset=None,
         hx_on_select=None, hx_on_submit=None, hx_on_keydown=None,
         hx_on_keypress=None, hx_on_keyup=None, hx_on_click=None,
         hx_on_dblclick=None, hx_on_mousedown=None, hx_on_mouseenter=None,
         hx_on_mouseleave=None, hx_on_mousemove=None, hx_on_mouseout=None,
         hx_on_mouseover=None, hx_on_mouseup=None, hx_on_wheel=None,
         hx_on__abort=None, hx_on__after_on_load=None,
         hx_on__after_process_node=None, hx_on__after_request=None,
         hx_on__after_settle=None, hx_on__after_swap=None,
         hx_on__before_cleanup_element=None, hx_on__before_on_load=None,
         hx_on__before_process_node=None, hx_on__before_request=None,
         hx_on__before_swap=None, hx_on__before_send=None,
         hx_on__before_transition=None, hx_on__config_request=None,
         hx_on__confirm=None, hx_on__history_cache_error=None,
         hx_on__history_cache_miss=None,
         hx_on__history_cache_miss_error=None,
         hx_on__history_cache_miss_load=None, hx_on__history_restore=None,
         hx_on__before_history_save=None, hx_on__load=None,
         hx_on__no_sse_source_error=None, hx_on__on_load_error=None,
         hx_on__oob_after_swap=None, hx_on__oob_before_swap=None,
         hx_on__oob_error_no_target=None, hx_on__prompt=None,
         hx_on__pushed_into_history=None, hx_on__replaced_in_history=None,
         hx_on__response_error=None, hx_on__send_abort=None,
         hx_on__send_error=None, hx_on__sse_error=None,
         hx_on__sse_open=None, hx_on__swap_error=None,
         hx_on__target_error=None, hx_on__timeout=None,
         hx_on__validation_validate=None, hx_on__validation_failed=None,
         hx_on__validation_halted=None, hx_on__xhr_abort=None,
         hx_on__xhr_loadend=None, hx_on__xhr_loadstart=None,
         hx_on__xhr_progress=None)

一个标准的 SVG circle 元素

demo(Circle(20, 25, 25, stroke='red', stroke_width=3))

---

源代码

椭圆 (Ellipse)

 Ellipse (rx, ry, cx=0, cy=0, fill=None, stroke=None, stroke_width=None,
          transform=None, opacity=None, clip=None, mask=None, filter=None,
          vector_effect=None, pointer_events=None, target_id=None,
          hx_vals=None, hx_target=None, id=None, cls=None, title=None,
          style=None, accesskey=None, contenteditable=None, dir=None,
          draggable=None, enterkeyhint=None, hidden=None, inert=None,
          inputmode=None, lang=None, popover=None, spellcheck=None,
          tabindex=None, translate=None, hx_get=None, hx_post=None,
          hx_put=None, hx_delete=None, hx_patch=None, hx_trigger=None,
          hx_swap=None, hx_swap_oob=None, hx_include=None, hx_select=None,
          hx_select_oob=None, hx_indicator=None, hx_push_url=None,
          hx_confirm=None, hx_disable=None, hx_replace_url=None,
          hx_disabled_elt=None, hx_ext=None, hx_headers=None,
          hx_history=None, hx_history_elt=None, hx_inherit=None,
          hx_params=None, hx_preserve=None, hx_prompt=None,
          hx_request=None, hx_sync=None, hx_validate=None,
          hx_on_blur=None, hx_on_change=None, hx_on_contextmenu=None,
          hx_on_focus=None, hx_on_input=None, hx_on_invalid=None,
          hx_on_reset=None, hx_on_select=None, hx_on_submit=None,
          hx_on_keydown=None, hx_on_keypress=None, hx_on_keyup=None,
          hx_on_click=None, hx_on_dblclick=None, hx_on_mousedown=None,
          hx_on_mouseenter=None, hx_on_mouseleave=None,
          hx_on_mousemove=None, hx_on_mouseout=None, hx_on_mouseover=None,
          hx_on_mouseup=None, hx_on_wheel=None, hx_on__abort=None,
          hx_on__after_on_load=None, hx_on__after_process_node=None,
          hx_on__after_request=None, hx_on__after_settle=None,
          hx_on__after_swap=None, hx_on__before_cleanup_element=None,
          hx_on__before_on_load=None, hx_on__before_process_node=None,
          hx_on__before_request=None, hx_on__before_swap=None,
          hx_on__before_send=None, hx_on__before_transition=None,
          hx_on__config_request=None, hx_on__confirm=None,
          hx_on__history_cache_error=None, hx_on__history_cache_miss=None,
          hx_on__history_cache_miss_error=None,
          hx_on__history_cache_miss_load=None,
          hx_on__history_restore=None, hx_on__before_history_save=None,
          hx_on__load=None, hx_on__no_sse_source_error=None,
          hx_on__on_load_error=None, hx_on__oob_after_swap=None,
          hx_on__oob_before_swap=None, hx_on__oob_error_no_target=None,
          hx_on__prompt=None, hx_on__pushed_into_history=None,
          hx_on__replaced_in_history=None, hx_on__response_error=None,
          hx_on__send_abort=None, hx_on__send_error=None,
          hx_on__sse_error=None, hx_on__sse_open=None,
          hx_on__swap_error=None, hx_on__target_error=None,
          hx_on__timeout=None, hx_on__validation_validate=None,
          hx_on__validation_failed=None, hx_on__validation_halted=None,
          hx_on__xhr_abort=None, hx_on__xhr_loadend=None,
          hx_on__xhr_loadstart=None, hx_on__xhr_progress=None)

一个标准的 SVG ellipse 元素

demo(Ellipse(20, 10, 25, 25))

---

源代码

transformd

 transformd (translate=None, scale=None, rotate=None, skewX=None,
             skewY=None, matrix=None)

创建一个 SVG transform 关键字参数字典

rot = transformd(rotate=(45, 25, 25))
rot

{'transform': 'rotate(45,25,25)'}

demo(Ellipse(20, 10, 25, 25, **rot))

---

源代码

直线 (Line)

 Line (x1, y1, x2=0, y2=0, stroke='black', w=None, stroke_width=1,
       transform=None, opacity=None, clip=None, mask=None, filter=None,
       vector_effect=None, pointer_events=None, target_id=None,
       hx_vals=None, hx_target=None, id=None, cls=None, title=None,
       style=None, accesskey=None, contenteditable=None, dir=None,
       draggable=None, enterkeyhint=None, hidden=None, inert=None,
       inputmode=None, lang=None, popover=None, spellcheck=None,
       tabindex=None, translate=None, hx_get=None, hx_post=None,
       hx_put=None, hx_delete=None, hx_patch=None, hx_trigger=None,
       hx_swap=None, hx_swap_oob=None, hx_include=None, hx_select=None,
       hx_select_oob=None, hx_indicator=None, hx_push_url=None,
       hx_confirm=None, hx_disable=None, hx_replace_url=None,
       hx_disabled_elt=None, hx_ext=None, hx_headers=None,
       hx_history=None, hx_history_elt=None, hx_inherit=None,
       hx_params=None, hx_preserve=None, hx_prompt=None, hx_request=None,
       hx_sync=None, hx_validate=None, hx_on_blur=None, hx_on_change=None,
       hx_on_contextmenu=None, hx_on_focus=None, hx_on_input=None,
       hx_on_invalid=None, hx_on_reset=None, hx_on_select=None,
       hx_on_submit=None, hx_on_keydown=None, hx_on_keypress=None,
       hx_on_keyup=None, hx_on_click=None, hx_on_dblclick=None,
       hx_on_mousedown=None, hx_on_mouseenter=None, hx_on_mouseleave=None,
       hx_on_mousemove=None, hx_on_mouseout=None, hx_on_mouseover=None,
       hx_on_mouseup=None, hx_on_wheel=None, hx_on__abort=None,
       hx_on__after_on_load=None, hx_on__after_process_node=None,
       hx_on__after_request=None, hx_on__after_settle=None,
       hx_on__after_swap=None, hx_on__before_cleanup_element=None,
       hx_on__before_on_load=None, hx_on__before_process_node=None,
       hx_on__before_request=None, hx_on__before_swap=None,
       hx_on__before_send=None, hx_on__before_transition=None,
       hx_on__config_request=None, hx_on__confirm=None,
       hx_on__history_cache_error=None, hx_on__history_cache_miss=None,
       hx_on__history_cache_miss_error=None,
       hx_on__history_cache_miss_load=None, hx_on__history_restore=None,
       hx_on__before_history_save=None, hx_on__load=None,
       hx_on__no_sse_source_error=None, hx_on__on_load_error=None,
       hx_on__oob_after_swap=None, hx_on__oob_before_swap=None,
       hx_on__oob_error_no_target=None, hx_on__prompt=None,
       hx_on__pushed_into_history=None, hx_on__replaced_in_history=None,
       hx_on__response_error=None, hx_on__send_abort=None,
       hx_on__send_error=None, hx_on__sse_error=None,
       hx_on__sse_open=None, hx_on__swap_error=None,
       hx_on__target_error=None, hx_on__timeout=None,
       hx_on__validation_validate=None, hx_on__validation_failed=None,
       hx_on__validation_halted=None, hx_on__xhr_abort=None,
       hx_on__xhr_loadend=None, hx_on__xhr_loadstart=None,
       hx_on__xhr_progress=None)

一个标准的 SVG line 元素

demo(Line(20, 30, w=3))

---

源代码

折线 (Polyline)

 Polyline (*args, points=None, fill=None, stroke=None, stroke_width=None,
           transform=None, opacity=None, clip=None, mask=None,
           filter=None, vector_effect=None, pointer_events=None,
           target_id=None, hx_vals=None, hx_target=None, id=None,
           cls=None, title=None, style=None, accesskey=None,
           contenteditable=None, dir=None, draggable=None,
           enterkeyhint=None, hidden=None, inert=None, inputmode=None,
           lang=None, popover=None, spellcheck=None, tabindex=None,
           translate=None, hx_get=None, hx_post=None, hx_put=None,
           hx_delete=None, hx_patch=None, hx_trigger=None, hx_swap=None,
           hx_swap_oob=None, hx_include=None, hx_select=None,
           hx_select_oob=None, hx_indicator=None, hx_push_url=None,
           hx_confirm=None, hx_disable=None, hx_replace_url=None,
           hx_disabled_elt=None, hx_ext=None, hx_headers=None,
           hx_history=None, hx_history_elt=None, hx_inherit=None,
           hx_params=None, hx_preserve=None, hx_prompt=None,
           hx_request=None, hx_sync=None, hx_validate=None,
           hx_on_blur=None, hx_on_change=None, hx_on_contextmenu=None,
           hx_on_focus=None, hx_on_input=None, hx_on_invalid=None,
           hx_on_reset=None, hx_on_select=None, hx_on_submit=None,
           hx_on_keydown=None, hx_on_keypress=None, hx_on_keyup=None,
           hx_on_click=None, hx_on_dblclick=None, hx_on_mousedown=None,
           hx_on_mouseenter=None, hx_on_mouseleave=None,
           hx_on_mousemove=None, hx_on_mouseout=None,
           hx_on_mouseover=None, hx_on_mouseup=None, hx_on_wheel=None,
           hx_on__abort=None, hx_on__after_on_load=None,
           hx_on__after_process_node=None, hx_on__after_request=None,
           hx_on__after_settle=None, hx_on__after_swap=None,
           hx_on__before_cleanup_element=None, hx_on__before_on_load=None,
           hx_on__before_process_node=None, hx_on__before_request=None,
           hx_on__before_swap=None, hx_on__before_send=None,
           hx_on__before_transition=None, hx_on__config_request=None,
           hx_on__confirm=None, hx_on__history_cache_error=None,
           hx_on__history_cache_miss=None,
           hx_on__history_cache_miss_error=None,
           hx_on__history_cache_miss_load=None,
           hx_on__history_restore=None, hx_on__before_history_save=None,
           hx_on__load=None, hx_on__no_sse_source_error=None,
           hx_on__on_load_error=None, hx_on__oob_after_swap=None,
           hx_on__oob_before_swap=None, hx_on__oob_error_no_target=None,
           hx_on__prompt=None, hx_on__pushed_into_history=None,
           hx_on__replaced_in_history=None, hx_on__response_error=None,
           hx_on__send_abort=None, hx_on__send_error=None,
           hx_on__sse_error=None, hx_on__sse_open=None,
           hx_on__swap_error=None, hx_on__target_error=None,
           hx_on__timeout=None, hx_on__validation_validate=None,
           hx_on__validation_failed=None, hx_on__validation_halted=None,
           hx_on__xhr_abort=None, hx_on__xhr_loadend=None,
           hx_on__xhr_loadstart=None, hx_on__xhr_progress=None)

一个标准的 SVG polyline 元素

demo(Polyline((0,0), (10,10), (20,0), (30,10), (40,0),
              fill='yellow', stroke='blue', stroke_width=2))

demo(Polyline(points='0,0 10,10 20,0 30,10 40,0', fill='purple', stroke_width=2))

---

源代码

多边形 (Polygon)

 Polygon (*args, points=None, fill=None, stroke=None, stroke_width=None,
          transform=None, opacity=None, clip=None, mask=None, filter=None,
          vector_effect=None, pointer_events=None, target_id=None,
          hx_vals=None, hx_target=None, id=None, cls=None, title=None,
          style=None, accesskey=None, contenteditable=None, dir=None,
          draggable=None, enterkeyhint=None, hidden=None, inert=None,
          inputmode=None, lang=None, popover=None, spellcheck=None,
          tabindex=None, translate=None, hx_get=None, hx_post=None,
          hx_put=None, hx_delete=None, hx_patch=None, hx_trigger=None,
          hx_swap=None, hx_swap_oob=None, hx_include=None, hx_select=None,
          hx_select_oob=None, hx_indicator=None, hx_push_url=None,
          hx_confirm=None, hx_disable=None, hx_replace_url=None,
          hx_disabled_elt=None, hx_ext=None, hx_headers=None,
          hx_history=None, hx_history_elt=None, hx_inherit=None,
          hx_params=None, hx_preserve=None, hx_prompt=None,
          hx_request=None, hx_sync=None, hx_validate=None,
          hx_on_blur=None, hx_on_change=None, hx_on_contextmenu=None,
          hx_on_focus=None, hx_on_input=None, hx_on_invalid=None,
          hx_on_reset=None, hx_on_select=None, hx_on_submit=None,
          hx_on_keydown=None, hx_on_keypress=None, hx_on_keyup=None,
          hx_on_click=None, hx_on_dblclick=None, hx_on_mousedown=None,
          hx_on_mouseenter=None, hx_on_mouseleave=None,
          hx_on_mousemove=None, hx_on_mouseout=None, hx_on_mouseover=None,
          hx_on_mouseup=None, hx_on_wheel=None, hx_on__abort=None,
          hx_on__after_on_load=None, hx_on__after_process_node=None,
          hx_on__after_request=None, hx_on__after_settle=None,
          hx_on__after_swap=None, hx_on__before_cleanup_element=None,
          hx_on__before_on_load=None, hx_on__before_process_node=None,
          hx_on__before_request=None, hx_on__before_swap=None,
          hx_on__before_send=None, hx_on__before_transition=None,
          hx_on__config_request=None, hx_on__confirm=None,
          hx_on__history_cache_error=None, hx_on__history_cache_miss=None,
          hx_on__history_cache_miss_error=None,
          hx_on__history_cache_miss_load=None,
          hx_on__history_restore=None, hx_on__before_history_save=None,
          hx_on__load=None, hx_on__no_sse_source_error=None,
          hx_on__on_load_error=None, hx_on__oob_after_swap=None,
          hx_on__oob_before_swap=None, hx_on__oob_error_no_target=None,
          hx_on__prompt=None, hx_on__pushed_into_history=None,
          hx_on__replaced_in_history=None, hx_on__response_error=None,
          hx_on__send_abort=None, hx_on__send_error=None,
          hx_on__sse_error=None, hx_on__sse_open=None,
          hx_on__swap_error=None, hx_on__target_error=None,
          hx_on__timeout=None, hx_on__validation_validate=None,
          hx_on__validation_failed=None, hx_on__validation_halted=None,
          hx_on__xhr_abort=None, hx_on__xhr_loadend=None,
          hx_on__xhr_loadstart=None, hx_on__xhr_progress=None)

一个标准的 SVG polygon 元素

demo(Polygon((25,5), (43.3,15), (43.3,35), (25,45), (6.7,35), (6.7,15), 
             fill='lightblue', stroke='navy', stroke_width=2))

demo(Polygon(points='25,5 43.3,15 43.3,35 25,45 6.7,35 6.7,15',
             fill='lightgreen', stroke='darkgreen', stroke_width=2))

---

源代码

文本 (Text)

 Text (*args, x=0, y=0, font_family=None, font_size=None, fill=None,
       text_anchor=None, dominant_baseline=None, font_weight=None,
       font_style=None, text_decoration=None, transform=None,
       opacity=None, clip=None, mask=None, filter=None,
       vector_effect=None, pointer_events=None, target_id=None,
       hx_vals=None, hx_target=None, id=None, cls=None, title=None,
       style=None, accesskey=None, contenteditable=None, dir=None,
       draggable=None, enterkeyhint=None, hidden=None, inert=None,
       inputmode=None, lang=None, popover=None, spellcheck=None,
       tabindex=None, translate=None, hx_get=None, hx_post=None,
       hx_put=None, hx_delete=None, hx_patch=None, hx_trigger=None,
       hx_swap=None, hx_swap_oob=None, hx_include=None, hx_select=None,
       hx_select_oob=None, hx_indicator=None, hx_push_url=None,
       hx_confirm=None, hx_disable=None, hx_replace_url=None,
       hx_disabled_elt=None, hx_ext=None, hx_headers=None,
       hx_history=None, hx_history_elt=None, hx_inherit=None,
       hx_params=None, hx_preserve=None, hx_prompt=None, hx_request=None,
       hx_sync=None, hx_validate=None, hx_on_blur=None, hx_on_change=None,
       hx_on_contextmenu=None, hx_on_focus=None, hx_on_input=None,
       hx_on_invalid=None, hx_on_reset=None, hx_on_select=None,
       hx_on_submit=None, hx_on_keydown=None, hx_on_keypress=None,
       hx_on_keyup=None, hx_on_click=None, hx_on_dblclick=None,
       hx_on_mousedown=None, hx_on_mouseenter=None, hx_on_mouseleave=None,
       hx_on_mousemove=None, hx_on_mouseout=None, hx_on_mouseover=None,
       hx_on_mouseup=None, hx_on_wheel=None, hx_on__abort=None,
       hx_on__after_on_load=None, hx_on__after_process_node=None,
       hx_on__after_request=None, hx_on__after_settle=None,
       hx_on__after_swap=None, hx_on__before_cleanup_element=None,
       hx_on__before_on_load=None, hx_on__before_process_node=None,
       hx_on__before_request=None, hx_on__before_swap=None,
       hx_on__before_send=None, hx_on__before_transition=None,
       hx_on__config_request=None, hx_on__confirm=None,
       hx_on__history_cache_error=None, hx_on__history_cache_miss=None,
       hx_on__history_cache_miss_error=None,
       hx_on__history_cache_miss_load=None, hx_on__history_restore=None,
       hx_on__before_history_save=None, hx_on__load=None,
       hx_on__no_sse_source_error=None, hx_on__on_load_error=None,
       hx_on__oob_after_swap=None, hx_on__oob_before_swap=None,
       hx_on__oob_error_no_target=None, hx_on__prompt=None,
       hx_on__pushed_into_history=None, hx_on__replaced_in_history=None,
       hx_on__response_error=None, hx_on__send_abort=None,
       hx_on__send_error=None, hx_on__sse_error=None,
       hx_on__sse_open=None, hx_on__swap_error=None,
       hx_on__target_error=None, hx_on__timeout=None,
       hx_on__validation_validate=None, hx_on__validation_failed=None,
       hx_on__validation_halted=None, hx_on__xhr_abort=None,
       hx_on__xhr_loadend=None, hx_on__xhr_loadstart=None,
       hx_on__xhr_progress=None)

一个标准的 SVG text 元素

demo(Text("Hello!", x=10, y=30))

路径 (Paths)

SVG 中的路径更为复杂，因此我们添加了一个小型的（可选的）流式接口来构建它们

---

源代码

PathFT

 PathFT (tag:str, cs:tuple, attrs:dict=None, void_=False, **kwargs)

一个“Fast Tag”结构，包含 tag、children 和 attrs

---

源代码

路径 (Path)

 Path (d='', fill=None, stroke=None, stroke_width=None, transform=None,
       opacity=None, clip=None, mask=None, filter=None,
       vector_effect=None, pointer_events=None, target_id=None,
       hx_vals=None, hx_target=None, id=None, cls=None, title=None,
       style=None, accesskey=None, contenteditable=None, dir=None,
       draggable=None, enterkeyhint=None, hidden=None, inert=None,
       inputmode=None, lang=None, popover=None, spellcheck=None,
       tabindex=None, translate=None, hx_get=None, hx_post=None,
       hx_put=None, hx_delete=None, hx_patch=None, hx_trigger=None,
       hx_swap=None, hx_swap_oob=None, hx_include=None, hx_select=None,
       hx_select_oob=None, hx_indicator=None, hx_push_url=None,
       hx_confirm=None, hx_disable=None, hx_replace_url=None,
       hx_disabled_elt=None, hx_ext=None, hx_headers=None,
       hx_history=None, hx_history_elt=None, hx_inherit=None,
       hx_params=None, hx_preserve=None, hx_prompt=None, hx_request=None,
       hx_sync=None, hx_validate=None, hx_on_blur=None, hx_on_change=None,
       hx_on_contextmenu=None, hx_on_focus=None, hx_on_input=None,
       hx_on_invalid=None, hx_on_reset=None, hx_on_select=None,
       hx_on_submit=None, hx_on_keydown=None, hx_on_keypress=None,
       hx_on_keyup=None, hx_on_click=None, hx_on_dblclick=None,
       hx_on_mousedown=None, hx_on_mouseenter=None, hx_on_mouseleave=None,
       hx_on_mousemove=None, hx_on_mouseout=None, hx_on_mouseover=None,
       hx_on_mouseup=None, hx_on_wheel=None, hx_on__abort=None,
       hx_on__after_on_load=None, hx_on__after_process_node=None,
       hx_on__after_request=None, hx_on__after_settle=None,
       hx_on__after_swap=None, hx_on__before_cleanup_element=None,
       hx_on__before_on_load=None, hx_on__before_process_node=None,
       hx_on__before_request=None, hx_on__before_swap=None,
       hx_on__before_send=None, hx_on__before_transition=None,
       hx_on__config_request=None, hx_on__confirm=None,
       hx_on__history_cache_error=None, hx_on__history_cache_miss=None,
       hx_on__history_cache_miss_error=None,
       hx_on__history_cache_miss_load=None, hx_on__history_restore=None,
       hx_on__before_history_save=None, hx_on__load=None,
       hx_on__no_sse_source_error=None, hx_on__on_load_error=None,
       hx_on__oob_after_swap=None, hx_on__oob_before_swap=None,
       hx_on__oob_error_no_target=None, hx_on__prompt=None,
       hx_on__pushed_into_history=None, hx_on__replaced_in_history=None,
       hx_on__response_error=None, hx_on__send_abort=None,
       hx_on__send_error=None, hx_on__sse_error=None,
       hx_on__sse_open=None, hx_on__swap_error=None,
       hx_on__target_error=None, hx_on__timeout=None,
       hx_on__validation_validate=None, hx_on__validation_failed=None,
       hx_on__validation_halted=None, hx_on__xhr_abort=None,
       hx_on__xhr_loadend=None, hx_on__xhr_loadstart=None,
       hx_on__xhr_progress=None)

创建一个标准的 path SVG 元素。这是一个特殊的对象

让我们创建一个正方形，但使用 Path 而不是 Rect

• M(10, 10): 移动到起始点 (10, 10)
• L(40, 10): 画线到 (40, 10) - 顶边
• L(40, 40): 画线到 (40, 40) - 右边
• L(10, 40): 画线到 (10, 40) - 底边
• Z(): 闭合路径 - 连接回起点

M = 移动到 (Move to)，L = 画线到 (Line to)，Z = 闭合路径 (Close path)

demo(Path(fill='none', stroke='purple', stroke_width=2
         ).M(10, 10).L(40, 10).L(40, 40).L(10, 40).Z())

使用曲线我们可以创建一个螺旋线

p = (Path(fill='none', stroke='purple', stroke_width=2)
     .M(25, 25)
     .C(25, 25, 20, 20, 30, 20)
     .C(40, 20, 40, 30, 30, 30)
     .C(20, 30, 20, 15, 35, 15)
     .C(50, 15, 50, 35, 25, 35)
     .C(0, 35, 0, 10, 40, 10)
     .C(80, 10, 80, 40, 25, 40))
demo(p, 50, 100)

使用圆弧和曲线我们可以创建一个地图标记图标

p = (Path(fill='red')
     .M(25,45)
     .C(25,45,10,35,10,25)
     .A(15,15,0,1,1,40,25)
     .C(40,35,25,45,25,45)
     .Z())
demo(p)

在幕后，它只是创建了常规的 SVG 路径 d 属性——如果你愿意，也可以直接传入 d。

print(p.d)

 M25 45 C25 45 10 35 10 25 A15 15 0 1 1 40 25 C40 35 25 45 25 45 Z

demo(Path(d='M25 45 C25 45 10 35 10 25 A15 15 0 1 1 40 25 C40 35 25 45 25 45 Z'))

---

源代码

PathFT.M

 PathFT.M (x, y)

移动到 (Move to)。

---

源代码

PathFT.L

 PathFT.L (x, y)

画线到 (Line to)。

---

源代码

PathFT.H

 PathFT.H (x)

画水平线到 (Horizontal line to)。

---

源代码

PathFT.V

 PathFT.V (y)

画垂直线到 (Vertical line to)。

---

源代码

PathFT.Z

 PathFT.Z ()

闭合路径 (Close path)。

---

源代码

PathFT.C

 PathFT.C (x1, y1, x2, y2, x, y)

三次贝塞尔曲线 (Cubic Bézier curve)。

---

源代码

PathFT.S

 PathFT.S (x2, y2, x, y)

平滑三次贝塞尔曲线 (Smooth cubic Bézier curve)。

---

源代码

PathFT.Q

 PathFT.Q (x1, y1, x, y)

二次贝塞尔曲线 (Quadratic Bézier curve)。

---

源代码

PathFT.T

 PathFT.T (x, y)

平滑二次贝塞尔曲线 (Smooth quadratic Bézier curve)。

---

源代码

PathFT.A

 PathFT.A (rx, ry, x_axis_rotation, large_arc_flag, sweep_flag, x, y)

椭圆弧 (Elliptical Arc)。

HTMX 辅助工具

---

源代码

SvgOob

 SvgOob (*args, **kwargs)

根据 HTMX OOB 交换的要求包装一个 SVG 形状

当在 HTMX 中通过带外 (OOB) 方式返回 SVG 形状时，你需要用 SvgOob 将其包装，才能使其正确显示。（SvgOob 只是 Template(Svg(...)) 的一个快捷方式，这是使 SVG OOB 交换生效的技巧。）

---

源代码

SvgInb

 SvgInb (*args, **kwargs)

根据 HTMX 带内交换的要求包装一个 SVG 形状

当在 HTMX 中通过带内 (in-band) 方式返回 SVG 形状时，要么让调用元素包含 hx_select='svg>*'，要么使用 **svg_inb（这两种方式含义相同），或者用 SvgInb 包装响应，才能使其正确显示。（SvgInb 只是元组 (Svg(...), HtmxResponseHeaders(hx_reselect='svg>*')) 的一个快捷方式，这是使 SVG 带内交换生效的技巧。）