MozillaWiki - User contributions [en]

SVG:DOMReference

2005-09-07T16:37:39Z

Holger:

SVG Dom Bindings

[[SVG:GetSVGDocument]]

[[SVG:SVGAElement]]

[[SVG:SVGAltGlyphDefElement]] - not supported yet

[[SVG:SVGAltGlyphElement]] - not supported yet

[[SVG:SVGAltGlyphItemElement]] - not supported yet

[[SVG:SVGAngle]]

[[SVG:SVGAnimateColorElement]]

[[SVG:SVGAnimatedAngle]]

[[SVG:SVGAnimatedBoolean]]

[[SVG:SVGAnimatedEnumeration]]

[[SVG:SVGAnimatedInteger]]

[[SVG:SVGAnimatedLength]]

[[SVG:SVGAnimatedLengthList]]

[[SVG:SVGAnimatedNumber]]

[[SVG:SVGAnimatedNumberList]]

[[SVG:SVGAnimatedPathData]]

[[SVG:SVGAnimatedPoints]]

[[SVG:SVGAnimatedPreserveAspectRatio]]

[[SVG:SVGAnimatedRect]]

[[SVG:SVGAnimatedString]]

[[SVG:SVGAnimatedTransformList]]

[[SVG:SVGAnimateElement]]

[[SVG:SVGAnimateMotionElement]]

[[SVG:SVGAnimateTransformElement]]

[[SVG:SVGAnimationElement]]

[[SVG:SVGCircleElement]]

[[SVG:SVGClipPathElement]]

[[SVG:SVGColor]]

[[SVG:SVGColorProfileElement]]

[[SVG:SVGColorProfileRule]]

[[SVG:SVGComponentTransferFunctionElement]]

[[SVG:SVGCSSRule]]

[[SVG:SVGCursorElement]]

[[SVG:SVGDefinitionSrcElement]]

[[SVG:SVGDefsElement]]

[[SVG:SVGDescElement]]

[[SVG:SVGDocument]]

[[SVG:SVGElementInstance]]

[[SVG:SVGElementInstanceList]]

[[SVG:SVGEllipseElement]]

[[SVG:SVGEvent]]

[[SVG:SVGExternalResourcesRequired]]

[[SVG:SVGFEBlendElement]]

[[SVG:SVGFEColorMatrixElement]]

[[SVG:SVGFEComponentTransferElement]]

[[SVG:SVGFECompositeElement]]

[[SVG:SVGFEConvolveMatrixElement]]

[[SVG:SVGFEDiffuseLightingElement]]

[[SVG:SVGFEDisplacementMapElement]]

[[SVG:SVGFEDistantLightElement]]

[[SVG:SVGFEFloodElement]]

[[SVG:SVGFEFuncAElement]]

[[SVG:SVGFEFuncBElement]]

[[SVG:SVGFEFuncGElement]]

[[SVG:SVGFEFuncRElement]]

[[SVG:SVGFEGaussianBlurElement]]

[[SVG:SVGFEImageElement]]

[[SVG:SVGFEMergeElement]]

[[SVG:SVGFEMergeNodeElement]]

[[SVG:SVGFEMorphologyElement]]

[[SVG:SVGFEOffsetElement]]

[[SVG:SVGFEPointLightElement]]

[[SVG:SVGFESpecularLightingElement]]

[[SVG:SVGFESpotLightElement]]

[[SVG:SVGFETileElement]]

[[SVG:SVGFETurbulenceElement]]

[[SVG:SVGFilterElement]]

[[SVG:SVGFilterPrimitiveStandardAttributes]]

[[SVG:SVGFitToViewBox]]

[[SVG:SVGFontElement]]

[[SVG:SVGFontFaceElement]]

[[SVG:SVGFontFaceFormatElement]]

[[SVG:SVGFontFaceNameElement]]

[[SVG:SVGFontFaceSrcElement]]

[[SVG:SVGFontFaceUriElement]]

[[SVG:SVGForeignObjectElement]]

[[SVG:SVGGElement]]

[[SVG:SVGGlyphElement]]

[[SVG:SVGGlyphRefElement]]

[[SVG:SVGGradientElement]]

[[SVG:SVGHKernElement]]

[[SVG:SVGICCColor]]

[[SVG:SVGImageElement]]

[[SVG:SVGLangSpace]]

[[SVG:SVGLength]]

[[SVG:SVGLengthList]]

[[SVG:SVGLinearGradientElement]]

[[SVG:SVGLineElement]]

[[SVG:SVGLocatable]]

[[SVG:SVGMarkerElement]]

[[SVG:SVGMaskElement]]

[[SVG:SVGMatrix]]

[[SVG:SVGMetadataElement]]

[[SVG:SVGMissingGlyphElement]]

[[SVG:SVGMPathElement]]

[[SVG:SVGNumber]]

[[SVG:SVGNumberList]]

[[SVG:SVGPaint]]

[[SVG:SVGPathElement]]

[[SVG:SVGPathSeg]]

[[SVG:SVGPathSegArcAbs]]

[[SVG:SVGPathSegArcRel]]

[[SVG:SVGPathSegClosePath]]

[[SVG:SVGPathSegCurvetoCubicAbs]]

[[SVG:SVGPathSegCurvetoCubicRel]]

[[SVG:SVGPathSegCurvetoCubicSmoothAbs]]

[[SVG:SVGPathSegCurvetoCubicSmoothRel]]

[[SVG:SVGPathSegCurvetoQuadraticAbs]]

[[SVG:SVGPathSegCurvetoQuadraticRel]]

[[SVG:SVGPathSegCurvetoQuadraticSmoothAbs]]

[[SVG:SVGPathSegCurvetoQuadraticSmoothRel]]

[[SVG:SVGPathSegLinetoAbs]]

[[SVG:SVGPathSegLinetoHorizontalAbs]]

[[SVG:SVGPathSegLinetoHorizontalRel]]

[[SVG:SVGPathSegLinetoRel]]

[[SVG:SVGPathSegLinetoVerticalAbs]]

[[SVG:SVGPathSegLinetoVerticalRel]]

[[SVG:SVGPathSegList]]

[[SVG:SVGPathSegMovetoAbs]]

[[SVG:SVGPathSegMovetoRel]]

[[SVG:SVGPatternElement]]

[[SVG:SVGPoint]]

[[SVG:SVGPointList]]

[[SVG:SVGPolygonElement]]

[[SVG:SVGPolylineElement]]

[[SVG:SVGPreserveAspectRatio]]

[[SVG:SVGRadialGradientElement]]

[[SVG:SVGRect]]

[[SVG:SVGRectElement]]

[[SVG:SVGRenderingIntent]]

[[SVG:SVGScriptElement]]

[[SVG:SVGSetElement]]

[[SVG:SVGStopElement]]

[[SVG:SVGStringList]]

[[SVG:SVGStylable]]

[[SVG:SVGStyleElement]]

[[SVG:SVGSVGElement]]

[[SVG:SVGSwitchElement]]

[[SVG:SVGSymbolElement]]

[[SVG:SVGTests]]

[[SVG:SVGTextContentElement]]

[[SVG:SVGTextElement]]

[[SVG:SVGTextPathElement]]

[[SVG:SVGTextPositioningElement]]

[[SVG:SVGTitleElement]]

[[SVG:SVGTransform]]

[[SVG:SVGTransformable]]

[[SVG:SVGTransformList]]

[[SVG:SVGTRefElement]]

[[SVG:SVGTSpanElement]]

[[SVG:SVGUnitTypes]]

[[SVG:SVGURIReference]]

[[SVG:SVGUseElement]]

[[SVG:SVGViewElement]]

[[SVG:SVGViewSpec]]

[[SVG:SVGVKernElement]]

[[SVG:SVGZoomAndPan]]

[[SVG:SVGZoomEvent]]

SVG:DOMReference

2005-09-07T16:22:28Z

Holger:

SVG Dom Bindings

[[SVG:GetSVGDocument]]

[[SVG:SVGAElement]]

[[SVG:SVGAltGlyphDefElement]]

[[SVG:SVGAltGlyphElement]]

[[SVG:SVGAltGlyphItemElement]]

[[SVG:SVGAngle]]

[[SVG:SVGAnimateColorElement]]

[[SVG:SVGAnimatedAngle]]

[[SVG:SVGAnimatedBoolean]]

[[SVG:SVGAnimatedEnumeration]]

[[SVG:SVGAnimatedInteger]]

[[SVG:SVGAnimatedLength]]

[[SVG:SVGAnimatedLengthList]]

[[SVG:SVGAnimatedNumber]]

[[SVG:SVGAnimatedNumberList]]

[[SVG:SVGAnimatedPathData]]

[[SVG:SVGAnimatedPoints]]

[[SVG:SVGAnimatedPreserveAspectRatio]]

[[SVG:SVGAnimatedRect]]

[[SVG:SVGAnimatedString]]

[[SVG:SVGAnimatedTransformList]]

[[SVG:SVGAnimateElement]]

[[SVG:SVGAnimateMotionElement]]

[[SVG:SVGAnimateTransformElement]]

[[SVG:SVGAnimationElement]]

[[SVG:SVGCircleElement]]

[[SVG:SVGClipPathElement]]

[[SVG:SVGColor]]

[[SVG:SVGColorProfileElement]]

[[SVG:SVGColorProfileRule]]

[[SVG:SVGComponentTransferFunctionElement]]

[[SVG:SVGCSSRule]]

[[SVG:SVGCursorElement]]

[[SVG:SVGDefinitionSrcElement]]

[[SVG:SVGDefsElement]]

[[SVG:SVGDescElement]]

[[SVG:SVGDocument]]

[[SVG:SVGElementInstance]]

[[SVG:SVGElementInstanceList]]

[[SVG:SVGEllipseElement]]

[[SVG:SVGEvent]]

[[SVG:SVGExternalResourcesRequired]]

[[SVG:SVGFEBlendElement]]

[[SVG:SVGFEColorMatrixElement]]

[[SVG:SVGFEComponentTransferElement]]

[[SVG:SVGFECompositeElement]]

[[SVG:SVGFEConvolveMatrixElement]]

[[SVG:SVGFEDiffuseLightingElement]]

[[SVG:SVGFEDisplacementMapElement]]

[[SVG:SVGFEDistantLightElement]]

[[SVG:SVGFEFloodElement]]

[[SVG:SVGFEFuncAElement]]

[[SVG:SVGFEFuncBElement]]

[[SVG:SVGFEFuncGElement]]

[[SVG:SVGFEFuncRElement]]

[[SVG:SVGFEGaussianBlurElement]]

[[SVG:SVGFEImageElement]]

[[SVG:SVGFEMergeElement]]

[[SVG:SVGFEMergeNodeElement]]

[[SVG:SVGFEMorphologyElement]]

[[SVG:SVGFEOffsetElement]]

[[SVG:SVGFEPointLightElement]]

[[SVG:SVGFESpecularLightingElement]]

[[SVG:SVGFESpotLightElement]]

[[SVG:SVGFETileElement]]

[[SVG:SVGFETurbulenceElement]]

[[SVG:SVGFilterElement]]

[[SVG:SVGFilterPrimitiveStandardAttributes]]

[[SVG:SVGFitToViewBox]]

[[SVG:SVGFontElement]]

[[SVG:SVGFontFaceElement]]

[[SVG:SVGFontFaceFormatElement]]

[[SVG:SVGFontFaceNameElement]]

[[SVG:SVGFontFaceSrcElement]]

[[SVG:SVGFontFaceUriElement]]

[[SVG:SVGForeignObjectElement]]

[[SVG:SVGGElement]]

[[SVG:SVGGlyphElement]]

[[SVG:SVGGlyphRefElement]]

[[SVG:SVGGradientElement]]

[[SVG:SVGHKernElement]]

[[SVG:SVGICCColor]]

[[SVG:SVGImageElement]]

[[SVG:SVGLangSpace]]

[[SVG:SVGLength]]

[[SVG:SVGLengthList]]

[[SVG:SVGLinearGradientElement]]

[[SVG:SVGLineElement]]

[[SVG:SVGLocatable]]

[[SVG:SVGMarkerElement]]

[[SVG:SVGMaskElement]]

[[SVG:SVGMatrix]]

[[SVG:SVGMetadataElement]]

[[SVG:SVGMissingGlyphElement]]

[[SVG:SVGMPathElement]]

[[SVG:SVGNumber]]

[[SVG:SVGNumberList]]

[[SVG:SVGPaint]]

[[SVG:SVGPathElement]]

[[SVG:SVGPathSeg]]

[[SVG:SVGPathSegArcAbs]]

[[SVG:SVGPathSegArcRel]]

[[SVG:SVGPathSegClosePath]]

[[SVG:SVGPathSegCurvetoCubicAbs]]

[[SVG:SVGPathSegCurvetoCubicRel]]

[[SVG:SVGPathSegCurvetoCubicSmoothAbs]]

[[SVG:SVGPathSegCurvetoCubicSmoothRel]]

[[SVG:SVGPathSegCurvetoQuadraticAbs]]

[[SVG:SVGPathSegCurvetoQuadraticRel]]

[[SVG:SVGPathSegCurvetoQuadraticSmoothAbs]]

[[SVG:SVGPathSegCurvetoQuadraticSmoothRel]]

[[SVG:SVGPathSegLinetoAbs]]

[[SVG:SVGPathSegLinetoHorizontalAbs]]

[[SVG:SVGPathSegLinetoHorizontalRel]]

[[SVG:SVGPathSegLinetoRel]]

[[SVG:SVGPathSegLinetoVerticalAbs]]

[[SVG:SVGPathSegLinetoVerticalRel]]

[[SVG:SVGPathSegList]]

[[SVG:SVGPathSegMovetoAbs]]

[[SVG:SVGPathSegMovetoRel]]

[[SVG:SVGPatternElement]]

[[SVG:SVGPoint]]

[[SVG:SVGPointList]]

[[SVG:SVGPolygonElement]]

[[SVG:SVGPolylineElement]]

[[SVG:SVGPreserveAspectRatio]]

[[SVG:SVGRadialGradientElement]]

[[SVG:SVGRect]]

[[SVG:SVGRectElement]]

[[SVG:SVGRenderingIntent]]

[[SVG:SVGScriptElement]]

[[SVG:SVGSetElement]]

[[SVG:SVGStopElement]]

[[SVG:SVGStringList]]

[[SVG:SVGStylable]]

[[SVG:SVGStyleElement]]

[[SVG:SVGSVGElement]]

[[SVG:SVGSwitchElement]]

[[SVG:SVGSymbolElement]]

[[SVG:SVGTests]]

[[SVG:SVGTextContentElement]]

[[SVG:SVGTextElement]]

[[SVG:SVGTextPathElement]]

[[SVG:SVGTextPositioningElement]]

[[SVG:SVGTitleElement]]

[[SVG:SVGTransform]]

[[SVG:SVGTransformable]]

[[SVG:SVGTransformList]]

[[SVG:SVGTRefElement]]

[[SVG:SVGTSpanElement]]

[[SVG:SVGUnitTypes]]

[[SVG:SVGURIReference]]

[[SVG:SVGUseElement]]

[[SVG:SVGViewElement]]

[[SVG:SVGViewSpec]]

[[SVG:SVGVKernElement]]

[[SVG:SVGZoomAndPan]]

[[SVG:SVGZoomEvent]]

SVG:Script

2005-05-27T10:02:14Z

Holger:

== preventing default behaviour in event code ==

when writing drag and drop code, you will realize that text on the page gets accidently selected while dragging. or if you want to use the backspace key in your code, you want to prevent the browser from going back to the last page.
in these cases, one can use the evt.preventDefault() method.

== using eventListeners with objects ==

the methods addEventListener()and removeEventListener() are very usefull when writing interactive SVG. you can pass an object as the second parameter to that methods. this object has to implement the handleEvent interface.

function myRect(x,y,w,h,message){
this.message=message

this.rect=document.createElementNS("http://www.w3.org/2000/svg","rect")
this.rect.setAttribute("x",x)
this.rect.setAttribute("y",y)
this.rect.setAttribute("width",w)
this.rect.setAttribute("height",h)
document.documentElement.appendChild(this.rect)

this.rect.addEventListener("click",this,false)

this.handleEvent= function(evt){
switch (evt.type){
case "click":
alert(this.message)
break;
}
}
}

SVG:Namespace

2005-05-27T09:19:56Z

Holger: /* use namespace aware methods in javascript */

= declare namespaces for svg and xlink=

the namespace declaration for svg is required if you don't specify it, nothing will be rendered. the xlink namespace is required if you use <use/>, <image/>, <a/> ...

*the svg namespace: http://www.w3.org/2000/svg
*the xlink namespace: http://www.w3.org/1999/xlink

a simple SVG file may look like this:

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>title of drawing</title>

</svg>
= use namespace aware methods in javascript=

when using js, make sure you use the namspace aware methods like

*getElementsByTagNameNS()
*createElementNS()
*setAttributeNS()
*getAttributeNS()
*...

svg elements are in the svg namespace. svg attributes are in the null namespace.
for example, to dynamicly create an <image> element, do it like this:

svgns="http://www.w3.org/2000/svg"
xlinkns="http://www.w3.org/1999/xlink">
newIM=document.createElementNS(svgns,"image")
newIM.setAttributeNS(null,"width",100)
newIM.setAttributeNS(null,"height",100)
newIM.setAttributeNS(xlinkns,"href","bild2.png")

SVG:Namespace

2005-05-27T09:18:54Z

Holger: /* declare namespaces for svg and xlink */

SVG:Namespace

2005-04-28T10:47:09Z

Holger: /* declare namespaces for svg and xlink */

SVG:Namespace

2005-04-28T10:45:45Z

Holger: /* declare namespaces for svg and xlink */

SVG:Namespace

2005-04-28T10:42:38Z

Holger: