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
Classes

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:

						
						
					


						
							

							
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 23 2024 15:44:14 GMT+0200 (Mitteleuropäische Sommerzeit)