svg - Documentation

Description:

Des fonctions génériques pour manipuler du svg

Source:

legacy/core/functionsSvg.js, line 5

Des fonctions génériques pour manipuler du svg

Members

(static, constant) svgns :string

Description:

Le namespace svg

Source:

legacy/core/functionsSvg.js, line 43

Le namespace svg

Type:

string

Methods

(static) j3pCreeArc(svg, svgOptions, arcPropsopt) → {SVGElement|undefined}

Description:

Ajoute un arc dans svg (et le retourne)

Source:

legacy/core/functionsSvg.js, line 166

Parameters:

Name Type Attributes Description

svg SVGElement | string

svgOptions

SvgOptions | SvgOptionsFr

Options génériques du svg avec en plus les params :

arcProps

Object

Si non fourni on lira ces propriétés dans l’objet svgOptions

Properties

Name	Type	Attributes
`angleDebut`	number
`angle`	number
`centreX`	number
`centreY`	number
`rayon`	number
`id`	string	<optional>

Returns:

Type: SVGElement | undefined

(static) j3pCreeCercle(svg, options) → {SVGCircleElement|undefined}

Description:

Crée un cercle dans le svg

Source:

legacy/core/functionsSvg.js, line 207

Parameters:

Name Type Description

svg

SVGElement | string

Le svg (ou son id) dans lequel ajouter le cercle

options

Object

Properties

Name	Type	Attributes	Description
`cx`	number		attribut cx du svg créé
`cy`	number		attribut cy du svg créé
`rayon`	number		attribut r du svg créé
`id`	string	<optional>	l’id à affecter au svg qui sera retourné
`couleurRemplissage`	string	<optional>	si existe le cercle sera rempli avec cette couleur (sinon vide)
`couleur`	string	<optional>	couleur du trait
`epaisseur`	number \| string	<optional>	épaisseur du trait
`opaciteRemplissage`	number \| string	<optional>	éventuelle propriété fill-opacity

Returns:

Type: SVGCircleElement | undefined

(static) j3pCreeEllipse(svg, options) → {SVGElement|undefined}

Description:

Crée une ellipse dans le svg

Source:

legacy/core/functionsSvg.js, line 237

Parameters:

Name Type Description

svg

SVGElement | string

Le svg (ou son id) dans lequel ajouter le cercle

options

Object

Properties

Name	Type	Attributes	Description
`cx`	number		attribut cx du svg créé
`cy`	number		attribut cy du svg créé
`rayon_x`	number		attribut rx
`rayon_y`	number		attribut ry
`id`	string	<optional>	l’id à affecter au svg qui sera retourné
`couleurRemplissage`	string	<optional>	si existe le cercle sera rempli avec cette couleur (sinon vide)
`couleur`	string	<optional>	couleur du trait
`epaisseur`	number	<optional>	épaisseur du trait
`opaciteRemplissage`	string	<optional>	éventuelle propriété fill-opacity

Returns:

Type: SVGElement | undefined

(static) j3pCreeGroupe(svg, idopt) → {SVGGElement}

Description:

Ajoute un tag g dans le svg (et le retourne)

Source:

legacy/core/functionsSvg.js, line 290

Parameters:

Name	Type	Attributes	Description
`svg`	SVGElement
`id`	string	<optional>

Returns:

Type: SVGGElement

(static) j3pCreeRectangle(svg, props) → {SVGElement|undefined}

Description:

Crée un rectangle dans le svg (et le retourne) Pour les couleurs c’est du css donc "red" ou "rvb(r, v, b)" ou "#rrvvbb" fonctionnent

Source:

legacy/core/functionsSvg.js, line 360

Parameters:

Name Type Description

svg

SVGElement | string

Le svg ou son id

props

Object

Properties

Name	Type	Attributes	Description
`id`	string	<optional>
`x`	number
`y`	number
`width`	number
`height`	number
`epaisseur`	number		(stroke-width)
`couleurRemplissage`	string	<optional>	(fill)
`opaciteRemplissage`	string	<optional>	(fill-opacity)
`couleur`	string	<optional>	couleur du trait (stroke)

Returns:

Type: SVGElement | undefined

(static) j3pCreeSVG(container, svgProps) → {SVGElement}

Description:

Ajoute un svg dans un conteneur html (utiliser j3pSvgAppend pour ajouter un svg dans un svg)

Source:

legacy/core/functionsSvg.js, line 430

Parameters:

Name Type Description

container

HTMLElement | string

Le conteneur html ou son id

svgProps

Object

Properties

Name	Type	Attributes	Default	Description
`width`	number
`height`	number
`viewBox`	string \| Array.<number>	<optional>
`preserveAspectRatio`	string	<optional>		none\|x(Mid\|Min\|Max)Y(Mid\|Min\|Max)
`tag`	string	<optional>	`svg`	le tag du svg
`id`	string	<optional>		id du svg
`style`	string \| Object	<optional>		styles éventuels

Throws:

si le conteneur n’existe pas
Type Error

Returns:

Type: SVGElement

(static) j3pCreeSecteur(svg, options)

Description:

Dessine un secteur angulaire

Source:

legacy/core/functionsSvg.js, line 387

Parameters:

Name Type Description

svg SVGElement

options

Object

Properties

Name	Type	Attributes	Default
`id`	string	<optional>
`couleur`	string	<optional>	`#000`
`opacite`	number \| string	<optional>	`1`
`angleDebut`	number
`anglefin`	number
`centreX`	number
`centreY`	number
`rayon`	number

(static) j3pCreeSegment(svg, lineProps) → {SVGLineElement|undefined}

Description:

Ajoute une ligne dans un svg

Source:

legacy/core/functionsSvg.js, line 268

Parameters:

Name Type Description

svg SVGElement | string

lineProps

Object

Properties

Name	Type	Attributes	Default
`x1`	number
`y1`	number
`x2`	number
`y2`	number
`id`	string	<optional>
`couleur`	string	<optional>
`epaisseur`	number	<optional>	`0`
`opacite`	number	<optional>
`pointilles`	boolean	<optional>

Returns:

Type: SVGLineElement | undefined

(static) j3pCreeTexte(svg, txtProps) → {SVGTextElement}

Description:

Ajoute du texte dans un svg

Source:

legacy/core/functionsSvg.js, line 579

Parameters:

Name Type Attributes Default Description

svg

SVGElement | string

Le svg conteneur ou son id

txtProps

Object

Properties

Name	Type	Attributes	Description
`texte`	string		Le texte à insérer
`id`	string	<optional>
`couleur`	string	<optional>
`fonte`	string	<optional>
`x`	number
`y`	number
`taille`	number		(sera mis en font-size, ATTENTION en pt !)

txtProps. number

txtProps.rotation

Object

Properties

Name	Type	Description
`angle`	number
`Cx`	number
`Cy`	number

txtProps.italique boolean <optional> false

txtProps.bold boolean <optional> false

txtProps.centerX

boolean

false

Passer true pour centrer le texte sur son x

txtProps.centerY

boolean

false

Passer true pour centrer le texte sur son y

Returns:

Type: SVGTextElement

(static) j3pPolygone(svg, pathProps) → {SVGPathElement|undefined}

Description:

Ajoute un polygone dans le svg (ne pas mettre de couleur de remplissage pour ne pas le remplir)

Source:

legacy/core/functionsSvg.js, line 659

Parameters:

Name Type Description

svg SVGElement

pathProps

Object

Properties

Name	Type	Attributes	Description
`id`	string	<optional>
`couleurRemplissage`	string
`couleur`	string
`tab`	Array.<Array>		La liste des sommets, chacun étant un Array [x, y]
`opaciteRemplissage`	number

Returns:

Type: SVGPathElement | undefined

(static) j3pSvgAppend(svgElt, tag, attrs, optionsopt) → {SVGElement}

Description:

Ajoute un élément dans un svg

Source:

legacy/core/functionsSvg.js, line 697

Parameters:

Name Type Attributes Description

svgElt

SVGElement

(pourrait être un HTMLElement si tag est 'svg', pour ajouter un svg dans le dom html)

tag

string

le tag svg à insérer dans svgElt

attrs

Object

Les attributs à ajouter au tag (la propriété xlink sera ajoutée avec son namespace)

options

Object

Properties

Name	Type	Attributes	Default	Description
`style`	Object	<optional>		le style sous forme d’objet (peut aussi être passé en string dans attrs)
`text`	string	<optional>		Le texte à ajouter dans le tag (à priori pour un tag text), ce sera un TextNode (avec conversion des entités html éventuelles &xxx;)
`bgColor`	string	<optional>		Une couleur de fond à mettre sous l’élément (à priori du texte), ça va ajouter un tag rect coloré avec cette couleur sous l’élément
`bgPadding`	number	<optional>	`0`	Le débordement du rectangle de fond à ajouter, par rapport au tag inséré, en unités du svg

Returns:

Type: SVGElement

Type Definitions

SvgOptions

Description:

Options génériques pour tout élément svg

Source:

legacy/core/functionsSvg.js, line 24

Properties:

Name	Type	Attributes	Default	Description
`tag`	string	<optional>	`svg`	le tag de l’élément à créer
`width`	number	<optional>		largeur de l’élément svg qui sera créé
`height`	number	<optional>		hauteur de l’élément svg qui sera créé
`id`	string	<optional>		l’id à affecter à cet élément svg
`style`	Object	<optional>		Des styles à appliquer à l’élément (à la place de ce qui suit)
`stroke`	string	<optional>		couleur du trait, pour ne pas tracer le contour d’une surface passer none ou bien strokeWidth: 0
`strokeWidth`	number	<optional>		épaisseur du trait (passer 0 pour ne pas avoir de trait)
`strokeOpacity`	number	<optional>		opacité du trait
`fill`	string	<optional>		couleur de remplissage, pour ne pas remplir passer 'none'
`fillOpacity`	number \| string	<optional>		opacité du remplissage

Options génériques pour tout élément svg

Type:

Object

SvgOptionsFr

Description:

Options génériques pour tout élément svg

Source:

legacy/core/functionsSvg.js, line 9

Properties:

Name	Type	Attributes	Default	Description
`tag`	string	<optional>	`svg`	le tag de l’élément à créer
`width`	number	<optional>		largeur de l’élément svg qui sera créé
`height`	number	<optional>		hauteur de l’élément svg qui sera créé
`id`	string	<optional>		l’id à affecter à cet élément svg
`style`	Object	<optional>		Des styles à appliquer à l’élément (à la place de ce qui suit)
`couleur`	string	<optional>		couleur du trait (stroke), passer none pour ne pas tracer le contour d’une surface (ou bien epaisseur: 0)
`epaisseur`	number	<optional>		épaisseur du trait (strokeWidth)
`opacite`	number	<optional>		opacité du trait (strokeOpacity)
`couleurRemplissage`	string	<optional>		couleur de remplissage (fill), pour ne pas remplir passer 'none'
`opaciteRemplissage`	number \| string	<optional>		opacité du remplissage (fillOpacity)

Options génériques pour tout élément svg

Type:

Object