# JSXGraph 1.10.0 Reference

## JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Class Index | File Index

Elements

- Angle
- Arc
- Arrow
- Arrowparallel
- Axes3D
- Axis
- Axis3D
- Bisector
- Bisectorlines
- Boxplot
- Button
- Cardinalspline
- Chart
- Checkbox
- Circle
- Circle3D
- Circumcenter
- Circumcircle
- CircumcircleArc
- CircumcircleSector
- Comb
- Conic
- Curve
- Curve3D
- CurveDifference
- CurveIntersection
- CurveUnion
- Derivative
- Ellipse
- ForeignObject
- Functiongraph
- Functiongraph3D
- Glider
- Grid
- Group
- Hatch
- Hyperbola
- Image
- ImplicitCurve
- Incenter
- Incircle
- Inequality
- Input
- Integral
- Intersection
- IntersectionCircle3D
- IntersectionLine3D
- Label
- Legend
- Line
- Line3D
- Locus
- MajorArc
- MajorSector
- Measurement
- Mesh3D
- Metapostspline
- Midpoint
- MinorArc
- MinorSector
- mirrorelement
- Mirrorpoint
- NonReflexAngle
- Normal
- Orthogonalprojection
- OtherIntersection
- Parabola
- Parallel
- Parallelogram
- Parallelpoint
- ParametricSurface3D
- Perpendicular
- PerpendicularPoint
- PerpendicularSegment
- Point
- Point3D
- PolarLine
- PolePoint
- Polygon
- PolygonalChain
- RadicalAxis
- Reflection
- ReflexAngle
- RegularPolygon
- Riemannsum
- Sector
- Segment
- Semicircle
- Slider
- Slopefield
- Slopetriangle
- Smartlabel
- Sphere3D
- Spline
- Stepfunction
- Tangent
- TangentTo
- Tapemeasure
- Text
- Text3D
- Ticks
- Ticks3D
- Tracecurve
- Transformation
- Turtle
- Vectorfield
- Vectorfield3D
- View3D

Classes

- _global_
- JXG
- JXG.AbstractRenderer
- JXG.Board
- JXG.Board.infobox
- JXG.C
- JXG.CA
- JXG.CanvasRenderer
- JXG.Chart
- JXG.Circle
- JXG.Circle3D
- JXG.Complex
- JXG.Composition
- JXG.Coords
- JXG.CoordsElement
- JXG.Curve
- JXG.Curve3D
- JXG.Dump
- JXG.EventEmitter
- JXG.Expect
- JXG.ForeignObject
- JXG.GeometryElement
- JXG.GeometryElement3D
- JXG.GeonextParser
- JXG.Group
- JXG.Image
- JXG.JessieCode
- JXG.JSXGraph
- JXG.Legend
- JXG.Line
- JXG.Line3D
- JXG.Math
- JXG.Math.BoxQuadtree
- JXG.Math.Clip
- JXG.Math.Extrapolate
- JXG.Math.Geometry
- JXG.Math.ImplicitPlot
- JXG.Math.IntervalArithmetic
- JXG.Math.Metapost
- JXG.Math.Nlp
- JXG.Math.Numerics
- JXG.Math.Plot
- JXG.Math.Poly
- JXG.Math.Poly.Monomial
- JXG.Math.Poly.Polynomial
- JXG.Math.Poly.Ring
- JXG.Math.ProbFuncs
- JXG.Math.Quadtree
- JXG.Math.Statistics
- JXG.Math.Symbolic
- JXG.NoRenderer
- JXG.Options
- JXG.Plane3D
- JXG.Point
- JXG.Point3D
- JXG.Polygon
- JXG.Polygon3D
- JXG.PrefixParser
- JXG.Server
- JXG.Server.modules
- JXG.Sphere3D
- JXG.Surface3D
- JXG.SVGRenderer
- JXG.Text
- JXG.Text3D
- JXG.Ticks
- JXG.Transformation
- JXG.Turtle
- JXG.Util
- JXG.Util.Base64
- JXG.Util.Unzip
- JXG.Util.UTF8
- JXG.View3D
- JXG.VMLRenderer
- JXG.XML

# Class JXG.SVGRenderer

JXG.AbstractRenderer
↳ JXG.SVGRenderer

JXG.SVGRenderer
Defined in: svg.js.
Extends JXG.AbstractRenderer.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| JXG.SVGRenderer(container, dim) Uses SVG to implement the rendering methods defined in JXG.AbstractRenderer.

Fields borrowed from class JXG.AbstractRenderer:
  container, dashArray, enhancedRendering, supportsForeignObject, type, vOffsetText

Field Summary
Field Attributes | Field Name and Description
--- | ---
| defs The `defs` element is a container element to reference reusable SVG elements.
| layer JSXGraph uses a layer system to sort the elements on the board.
| svgNamespace The SVG Namespace used in JSXGraph.
| svgRoot SVG root node
| xlinkNamespace The xlink namespace.

Fields borrowed from class JXG.AbstractRenderer:
  container, dashArray, enhancedRendering, supportsForeignObject, type, vOffsetText

Method Summary
Method Attributes | Method Name and Description
--- | ---
<private> | _createArrowHead(el, idAppendix, type) Creates an arrow DOM node.
<private> | _getValuesOfDOMElements(node) Walk recursively through the DOM subtree of a node and collect all value attributes together with the id of that node.
<private> | _setArrowColor(node, color, opacity, el, type) Updates color of an arrow DOM node.
<private> | _setAttribute(setFunc, testAttribute) Call user-defined function to set visual attributes.
<private> | createShadowFilter(id, rgb, opacity, blend, blur, offset) Create an SVG shadow filter.
| dumpToCanvas(canvasId, w, h, ignoreTexts) Convert the SVG construction into an HTML canvas image.
| dumpToDataURI(ignoreTexts) Return a data URI of the SVG code representing the construction.
| screenshot(board, imgId, ignoreTexts) Display SVG image in html img-tag which enables easy download for the user.
<private> | toStr() Combine arguments to a string, joined by empty string.
<private> | toURL() Combine arguments to an URL string of the form url(#.
<private> | uniqName() Create a "unique" string id from the arguments of the function.
<private> | updateGradientAngle(node, radians) Set the gradient angle for linear color gradients.
<private> | updateGradientCircle(node, cx, cy, r, fx, fy, fr) Set circles for radial color gradients.
<private> | updateInternalTextStyle(el, strokeColor, strokeOpacity, duration) Set color and opacity of internal texts.

Methods borrowed from class JXG.AbstractRenderer:
  _css2js, _getHighlighted, _setArrowWidth, _updateVisual, appendChildPrim, appendNodesToElement, changePointStyle, createPrim, createTouchpoints, display, displayCopyright, drawCurve, drawEllipse, drawImage, drawInternalText, drawLine, drawNavigationBar, drawPoint, drawPolygon, drawText, drawTicks, getArrowHeadData, getElementById, getPositionArrowHead, handleTouchpoints, hide, hideTouchpoint, highlight, joinTransforms, makeArrows, noHighlight, remove, removeDraft, removeToInsertLater, resize, setArrowSize, setBuffering, setDashStyle, setDraft, setGradient, setLayer, setLineCap, setObjectFillColor, setObjectStrokeColor, setObjectStrokeWidth, setObjectTransition, setObjectViewport, setPropertyPrim, setShadow, show, showTouchpoint, suspendRedraw, transformImage, unsuspendRedraw, updateCurve, updateEllipse, updateEllipsePrim, updateGradient, updateImage, updateImageStyle, updateImageURL, updateInternalText, updateLine, updateLinePrim, updateLineWithEndings, updatePath, updatePathPrim, updatePathStringBezierPrim, updatePathStringPoint, updatePathStringPrim, updatePathWithArrowHeads, updatePoint, updatePolygon, updatePolygonPrim, updateRectPrim, updateText, updateTextStyle, updateTicks, updateTouchpoint

Class Detail
JXG.SVGRenderer(container, dim)
Uses SVG to implement the rendering methods defined in JXG.AbstractRenderer.

Parameters:
{Node} container
  Reference to a DOM node containing the board.
{Object} dim
  The dimensions of the board
{Number} dim.width
{Number} dim.height

See:
  JXG.AbstractRenderer

Field Detail
{Node} defs
The `defs` element is a container element to reference reusable SVG elements.

See:
  https://www.w3.org/TR/SVG2/struct.html#DefsElement

{Array} layer
JSXGraph uses a layer system to sort the elements on the board. This puts certain types of elements in front of other types of elements. For the order used see JXG.Options.layer. The number of layers is documented there, too. The higher the number, the "more on top" are the elements on this layer.

{String} svgNamespace
The SVG Namespace used in JSXGraph.

See:
  http://www.w3.org/TR/SVG2/

Default Value:
  http://www.w3.org/2000/svg

{Node} svgRoot
SVG root node

{String} xlinkNamespace
The xlink namespace. This is used for images.

See:
  http://www.w3.org/TR/xlink/

Default Value:
  http://www.w3.org/1999/xlink

Method Detail
<private> {Node} _createArrowHead(el, idAppendix, type)
Creates an arrow DOM node. Arrows are displayed in SVG with a marker tag.

Parameters:
{JXG.GeometryElement} el
  A JSXGraph element, preferably one that can have an arrow attached.
{String} idAppendix Optional, Default: ''
  A string that is added to the node's id.
type

Returns:
  {Node} Reference to the node added to the DOM.

<private> {Array} _getValuesOfDOMElements(node)
Walk recursively through the DOM subtree of a node and collect all value attributes together with the id of that node. Attention: Only values of nodes having a valid id are taken.

Parameters:
{Node} node
  root node of DOM subtree that will be searched recursively.

Returns:
  {Array} Array with entries of the form [id, value]

<private> _setArrowColor(node, color, opacity, el, type)
Updates color of an arrow DOM node.

Parameters:
{Node} node
  The arrow node.
{String} color
  Color value in a HTML compatible format, e.g. `#00ff00` or `green` for green.
{Number} opacity
{JXG.GeometryElement} el
  The element the arrows are to be attached to
type

<private> _setAttribute(setFunc, testAttribute)
Call user-defined function to set visual attributes. If "testAttribute" is the empty string, the function is called immediately, otherwise it is called in a timeOut. This is necessary to realize smooth transitions but avoid transitions when first creating the objects. Usually, the string in testAttribute is the visPropOld attribute of the values which are set.

Parameters:
{Function} setFunc
  Some function which usually sets some attributes
{String} testAttribute
  If this string is the empty string the function is called immediately, otherwise it is called in a setImeout.

See:
  JXG.SVGRenderer#setObjectFillColor
  JXG.SVGRenderer#setObjectStrokeColor
  JXG.SVGRenderer#_setArrowColor

<private> createShadowFilter(id, rgb, opacity, blend, blur, offset)
Create an SVG shadow filter. If the object's RGB color is [r,g,b], it's opacity is op, and the parameter color is given as [r', g', b'] with opacity op' the shadow will have RGB color [blend*r + r', blend*g + g', blend*b + b'] and the opacity will be equal to op * op'. Further, blur and offset can be adjusted. The shadow color is [r*ble

Parameters:
{String} id
  Node is of the filter.
{Array|String} rgb
  RGB value for the blend color or the string 'none' for default values. Default 'black'.
{Number} opacity
  Value between 0 and 1, default is 1.
{Number} blend
  Value between 0 and 1, default is 0.1.
{Number} blur
  Default: 3
{Array} offset
  [dx, dy]. Default is [5,5].

Returns:
  DOM node to be added to this.defs.

{Promise} dumpToCanvas(canvasId, w, h, ignoreTexts)
Convert the SVG construction into an HTML canvas image. This works for all SVG supporting browsers. Implemented as Promise.

Might fail if any text element or foreign object element contains SVG. This is the case e.g. for the default fullscreen symbol.

For IE, it is realized as function. It works from version 9, with the exception that HTML texts are ignored on IE. The drawing is done with a delay of 200 ms. Otherwise there would be problems with IE.

Parameters:
{String} canvasId
  Id of an HTML canvas element
{Number} w
  Width in pixel of the dumped image, i.e. of the canvas tag.
{Number} h
  Height in pixel of the dumped image, i.e. of the canvas tag.
{Boolean} ignoreTexts
  If true, the foreignObject tag is taken out from the SVG root. This is necessary for older versions of Safari. Default: false

Returns:
  {Promise} Promise object

Examples:

    	board.renderer.dumpToCanvas('canvas').then(function() { console.log('done'); });

     // IE 11 example:
    	board.renderer.dumpToCanvas('canvas');
    	setTimeout(function() { console.log('done'); }, 400);

{String} dumpToDataURI(ignoreTexts)
Return a data URI of the SVG code representing the construction. The SVG code of the construction is base64 encoded. The return string starts with "data:image/svg+xml;base64,...".

Parameters:
{Boolean} ignoreTexts
  If true, the foreignObject tag is set to display=none. This is necessary for older versions of Safari. Default: false

Returns:
  {String} data URI string

Examples:

    var A = board.create('point', [2, 2]);

    var txt = board.renderer.dumpToDataURI(false);
    // txt consists of a string of the form
    // data:image/svg+xml;base64,PHN2Zy. base64 encoded SVG..+PC9zdmc+
    // Behind the comma, there is the base64 encoded SVG code
    // which is decoded with atob().
    // The call of decodeURIComponent(escape(...)) is necessary
    // to handle unicode strings correctly.
    var ar = txt.split(',');
    document.getElementById('output').value = decodeURIComponent(escape(atob(ar[1])));

{Object} screenshot(board, imgId, ignoreTexts)
Display SVG image in html img-tag which enables easy download for the user. Support:

- IE: No
- Edge: full
- Firefox: full
- Chrome: full
- Safari: full (No text support in versions prior to 12).

Parameters:
{JXG.Board} board
  Link to the board.
{String} imgId
  Optional id of an img object. If given and different from the empty string, the screenshot is copied to this img object. The width and height will be set to the values of the JSXGraph container.
{Boolean} ignoreTexts
  If set to true, the foreignObject is taken out of the SVGRoot and texts are not displayed. This is mandatory for Safari. Default: false

Returns:
  {Object} the svg renderer object

<private> toStr()
Combine arguments to a string, joined by empty string. Masks the container id with CSS.escape.

Returns:
  String

See:
  JXG.SVGRenderer#toURL

Examples:

    this.toStr('aaa', '_', 'bbb', 'TriangleEnd')
    // Output:
    // xxx_bbbTriangleEnd

<private> toURL()
Combine arguments to an URL string of the form url(#...) Masks the container id. Calls JXG.SVGRenderer#toStr.

Returns:
  URL string

See:
  JXG.SVGRenderer#toStr

Examples:

    this.toURL('aaa', '_', 'bbb', 'TriangleEnd')
    // Output:
    // url(#xxx_bbbTriangleEnd)

<private> {String} uniqName()
Create a "unique" string id from the arguments of the function. Concatenate all arguments by "_". "Unique" is achieved by simply prepending the container id. Do not escape the string. If the id is used in an "url()" call it must be eascaped.

Returns:
  {String}

<private> updateGradientAngle(node, radians)
Set the gradient angle for linear color gradients.

Parameters:
{SVGnode} node
  SVG gradient node of an arbitrary JSXGraph element.
{Number} radians
  angle value in radians. 0 is horizontal from left to right, Pi/4 is vertical from top to bottom.

<private> updateGradientCircle(node, cx, cy, r, fx, fy, fr)
Set circles for radial color gradients.

Parameters:
{SVGnode} node
  SVG gradient node
{Number} cx
  SVG value cx (value between 0 and 1)
{Number} cy
  SVG value cy (value between 0 and 1)
{Number} r
  SVG value r (value between 0 and 1)
{Number} fx
  SVG value fx (value between 0 and 1)
{Number} fy
  SVG value fy (value between 0 and 1)
{Number} fr
  SVG value fr (value between 0 and 1)

<private> updateInternalTextStyle(el, strokeColor, strokeOpacity, duration)
Set color and opacity of internal texts.

Parameters:
el
strokeColor
strokeOpacity
duration

See:
  JXG.AbstractRenderer#updateTextStyle
  JXG.AbstractRenderer#updateInternalTextStyle

Documentation generated by JsDoc Toolkit 2.4.0 on Wed Oct 02 2024 09:14:36 GMT+0200 (Mitteleuropäische Sommerzeit)