Introducción

Instalación

Preguntas frecuentes (faq)

Sintaxis, palabras clave y funciones integradas

Distribución estándar

Implementación del import

Interfaz del navegador

Introducción - DOM API
Creando un documento
Accediendo a los elementos
Atributos, propriedades y métodos

Eventos
Eventos del ratón
Eventos del teclado
Eventos de foco
Eventos de arrastre

Query string

Usando objetos y librerías Javascript

Módulos específicos de Brython

El módulo integrado `browser`
browser.aio
browser.ajax
browser.html
browser.local_storage
browser.markdown
browser.object_storage
browser.session_storage
browser.svg
browser.template
browser.timer
browser.webcomponent
browser.websocket
browser.worker

javascript

Trabajando con Brython

Opciones de la función brython()
Testing y depuración
Desplegando una aplicación

Cookbook

Hola Mundo !
Insertar contenido en un elemento
Marcado HTML (bold,italic...)
Tabla HTML
Añadir (*bind*) y eliminar (*unbind*) eventos
Handle options in a SELECT
Arrastrar y soltar
Obtener el contenido de un elemento
Leer el contenido de un fichero
Almacenar objetos localmente
Ejemplo de onmouseover
 

módulo browser.svg

Para crear gráficos vectoriales (formato SVG), soportado por la mayoría de navegadores, puedes usar el módulo browser.svg. El nombre proviene de los componentes disponibles para dibujar formas y escribir texto

El módulo define los siguientes nombres : a, altGlyph, altGlyphDef, altGlyphItem, animate, animateColor, animateMotion, animateTransform, circle, clipPath, color_profile, cursor, defs, desc, ellipse, feBlend, g, image, line, linearGradient, marker, mask, path, pattern, polygon, polyline, radialGradient, rect, stop, svg, text, tref, tspan, use

Por ejemplo, si el documento HTML posee una zona de gráficos SVG definida por

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="140" height="200" style="border-style:solid;border-width:1;border-color:#000;">
  <g id="panel">
  </g>
</svg>

puedes insertar formas y texto :

from browser import document, svg

titulo = svg.text('Titulo', x=70, y=25, font_size=22,
                 text_anchor="middle")
circulo = svg.circle(cx=70, cy=120, r=40,
                    stroke="black",stroke_width="2",fill="red")
panel = document['panel']
panel <= titulo
panel <= circulo

Para los atributos definidos en la norma SVG que contienen un guión (-), se deberá reemplazar con un guión bajo (_) en los argumentos: text_anchor en lugar de text-anchor el cual mostraría un error de sintaxis Python.

En el ejemplo anterior hemos creado un elemento círculo y un elemento texto. Para una lista de los colores puedes ver esta referencia

Abajo creamos un rectángulo azul con una anchura y una altura de 40 px.

from browser import document, svg

rect = svg.rect(x="40",y="100", width="40", height="40",
    stroke_width="2",fill="blue")

panel = document['panel1']
panel <= rect

Debajo puedes ver un ejemplo de una elipse verde:

from browser import document, svg
ellipse = svg.ellipse(cx="70",cy="100", rx="40", ry="80",
    stroke="black",stroke_width="2",fill="green")

panel = document['panel2']
panel <= ellipse

Aquí puedes ver un ejemplo de una línea marrón de longitud 100 píxeles.

from browser import document, svg

line = svg.line(x1="40",y1="50", x2="40", y2="150",
                stroke="brown",stroke_width="2")

panel = document['panel3']
panel <= line

Un ejemplo de un polígono (una estrella roja con el contorno azul)

from browser import document, svg

star = svg.polygon(fill="red", stroke="blue", stroke_width="10",
                   points=""" 75,38  90,80  135,80  98,107
                             111,150 75,125  38,150 51,107
                              15,80  60,80""")

panel = document['panel4']
panel <= star

Ejemplo de un rectángulo animado:

from browser import document, svg, timer

rect = svg.rect(x=10, y=10, width=100, height=100)

def move_rect():
    # the attributes of the SVG element are strings, they must be explicitely
    # converted into integers
    rect.attrs["y"] = int(rect.attrs["y"]) + 1
    
    # ends animation when the rectangle reaches its target
    if int(rect.attrs["y"]) > 50:
        timer.clear_interval(loop)

panel = document['panel5']
panel <= rect

# initialise the animation loop
loop = timer.set_interval(move_rect, 30)

Para información más detallada de las formas SVG, sus atributos, etc, puedes ver la documentación SVG Shape