Search completed in 1.06 seconds.
SVGGeometryElement - Web APIs
the svg
geometryelement interface represents svg elements whose rendering is defined by
geometry with an equivalent path, and which can be filled and stroked.
...="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svg
geometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
geometryelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: the pathlength...
... svg
geometryelement.pathlength read only this property reflects the pathlength attribute.
...And 5 more matches
XRBoundedReferenceSpace.boundsGeometry - Web APIs
the read-only xrboundedreferencespace property bounds
geometry is an array of dompointreadonly objects which specifies the points making up a polygon inside which the viewer is allowed to move.
... syntax bounds = xrreferencespace.bounds
geometry; value the bounds
geometry property is an array of dompointreadonly objects, each of which defines one vertex in a polygon inside which the viewer is required to remain.
... each entry in bounds
geometry is equal to an entry in the list of native bounds
geometry points for the room, premultiplied by the inverse of the origin offset.
...And 4 more matches
Geometry and reference spaces in WebXR - Web APIs
in this article, we introduce the ways in which webxr expands upon the
geometry of webgl, and how the positions and orientations of objects—both physical and virtual—are described in relation to one another using spaces and, in particular, reference spaces.
... fundamentals of 3d
geometry while we'll examine here the required math operations used to compute the positions, orientations, and movement of objects in virtual space—plus the need to integrate the human viewer of the scene into the mix—a thorough introduction to
geometry and the use of matrices and vectors to manage 3d representations of a scene is well beyond the scope of what can be accomplished in this article.
... units before discussing the details of the
geometry of the 3d space used by webxr, it's first useful to understand the units of measure that are applied to the 3d world.
...And 3 more matches
GeometryUtils - Web APIs
the
geometryutils interface provides different utility function to retrieve
geometry information about dom nodes.
...
geometryutils is a raw interface and no object of this type can be created; it is implemented by text, element, csspseudoelement, and document objects.
... methods
geometryutils.getboxquads() returns a list of domquad objects representing the css fragments of the node.
...
geometryutils.convertquadfromnode() fixme: needs a description
geometryutils.convertrectfromnode() fixme: needs a description
geometryutils.convertpointfromnode() fixme: needs a description specifications specification status comment css object model (cssom) view modulethe definition of '
geometryutils' in that specification.
SVGGeometryElement.getPointAtLength() - Web APIs
the svg
geometryelement.getpointatlength() method returns the point at a given distance along the path.
...svg 2 introduced the svg
geometryelement interface and moved the property to it.
... specifications specification status comment scalable vector graphics (svg) 2the definition of 'svg
geometryelement.gettotallength()' in that specification.
SVGGeometryElement.getTotalLength() - Web APIs
the svg
geometryelement.gettotallength() method returns the user agent's computed value for the total length of the path in user units.
...svg 2 introduced the svg
geometryelement interface and moved the property to it.
... specifications specification status comment scalable vector graphics (svg) 2the definition of 'svg
geometryelement.gettotallength()' in that specification.
SVGGeometryElement.pathLength - Web APIs
the svg
geometryelement.pathlength property reflects the pathlength attribute and returns the total length of the path, in user units.
...svg 2 introduced the svg
geometryelement interface and moved the property to it.
... syntax var pathlength = someelement.pathlength; specifications specification status comment scalable vector graphics (svg) 2the definition of 'svg
geometryelement.pathlength' in that specification.
Geometry.jsm
the
geometry.jsm javascript code module provides routines for performing common
geometry operations on points and rectangles.
...to use these routines, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/
geometry.jsm"); once you've imported the module, you can then use the point and rect classes.
SVGGeometryElement.isPointInFill() - Web APIs
the svg
geometryelement.ispointinfill() method determines whether a given point is within the fill shape of an element.
...> </svg> javascript var circle = document.getelementbyid('circle'); // point not in circle console.log('point at 10,10:', circle.ispointinfill(new dompoint(10, 10))); // point in circle console.log('point at 40,30:', circle.ispointinfill(new dompoint(40, 30))); result specifications specification status comment scalable vector graphics (svg) 2the definition of 'svg
geometryelement.ispointinfill()' in that specification.
SVGGeometryElement.isPointInStroke() - Web APIs
the svg
geometryelement.ispointinstroke() method determines whether a given point is within the stroke shape of an element.
... circle.ispointinstroke(new dompoint(10, 10))); // point in circle but not stroke console.log('point at 40,30:', circle.ispointinstroke(new dompoint(40, 30))); // point in circle stroke console.log('point at 83,17:', circle.ispointinstroke(new dompoint(83, 17))); result specifications specification status comment scalable vector graphics (svg) 2the definition of 'svg
geometryelement.ispointinstroke()' in that specification.
Index - Web APIs
718 dommatrix api, dommatrix, experimental,
geometry,
geometry interfaces, interface, reference, matrix the dommatrix interface represents 4x4 matrices, suitable for 2d and 3d operations including rotation and translation.
... 719 dommatrix() api, constructor, experimental,
geometry,
geometry interfaces, reference, matrix the dommatrix constructor creates a new dommatrix object which represents 4x4 matrices, suitable for 2d and 3d operations..
... 720 dommatrixreadonly 2d, 3d, api, computation, dommatrixreadonly,
geometry,
geometry interfaces, graphics, interface, math, modeling, read-only, reference, rotate, scale, skew, vr, web, angle, camera, matrix, transform the dommatrixreadonly interface represents a read-only 4x4 matrix, suitable for 2d and 3d operations.
...And 49 more matches
Bounding volume collision detection with THREE.js - Game development
usually we will want this aabb to be "linked" to an object in our 3d world (like a character.) in three.js,
geometry instances have a boundingbox property with min and max boundaries for the object.
... keep in mind that in order for this property to be defined, you need to manually call
geometry.computeboundingbox beforehand.
... var knot = new three.mesh( new three.torusknot
geometry(0.5, 0.1), new meshnormalmaterial({})); knot.
geometry.computeboundingbox(); var knotbbox = new box3( knot.
geometry.boundingbox.min, knot.
geometry.boundingbox.max); note: the boundingbox property takes the
geometry itself as reference, and not the mesh.
...And 6 more matches
Building up a basic demo with Three.js - Game development
geometry now our scene is properly rendering, we can start adding 3d shapes.
...let's start, by defining the
geometry for a cube shape, adding the following just above the render() function: var box
geometry = new three.box
geometry(10, 10, 10); in this case, we define a simple cube that is 10 x 10 x 10 units.
... the
geometry itself is not enough though, we also need a material that will be used for our shape.
...And 6 more matches
SVGPathElement - Web APIs
="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svg
geometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
geometryelement</text></a><polyline points="81,89 71,84 71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="71" y1="89" x...
...ont-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: in svg 2 the getpathsegatlength() and createsvgpathseg* methods were removed and the pathlength property and the gettotallength() and getpointatlength() methods were moved to svg
geometryelement.
... properties this interface also inherits properties from its parent, svg
geometryelement.
...And 5 more matches
WebGLRenderingContext.vertexAttribPointer() - Web APIs
description let's assume we want to render some 3d
geometry, and for that we will need to supply our vertices to the vertex shader.
... usually, your 3d
geometry is already in a certain binary format, so you need to read the specification of that specific format to figure out the memory layout.
... however, if you are designing the format yourself, or your
geometry is in text files (like wavefront .obj files) and must be converted into an arraybuffer at runtime, you have free choice on how to structure the memory.
...And 3 more matches
clip-path - CSS: Cascading Style Sheets
syntax /* keyword values */ clip-path: none; /* <clip-source> values */ clip-path: url(resources.svg#c1); /* <
geometry-box> values */ clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; /* <basic-shape> values */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: path('m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0...
... <basic-shape> a shape whose size and position is defined by the <
geometry-box> value.
... if no
geometry box is specified, the border-box will be used as the reference box.
...And 3 more matches
height - SVG: Scalable Vector Graphics
value auto | <length> | <percentage> default value auto (treated as 0) animatable yes note: starting with svg2, height is a
geometry property meaning this attribute can also be used as a css property for <foreignobject>.
... value auto | <length> | <percentage> default value auto (treated as the intrinsic height of the image) animatable yes note: starting with svg2, height is a
geometry property meaning this attribute can also be used as a css property for images.
... value auto | <length> | <percentage> default value auto (treated as 0) animatable yes note: starting with svg2, height is a
geometry property meaning this attribute can also be used as a css property for rectangles.
...And 3 more matches
width - SVG: Scalable Vector Graphics
value auto | <length> | <percentage> default value auto (treated as 0) animatable yes note: starting with svg2, width is a
geometry property meaning this attribute can also be used as a css property for <foreignobject>.
... value auto | <length> | <percentage> default value auto (treated as the intrinsic width of the image) animatable yes note: starting with svg2, width is a
geometry property meaning this attribute can also be used as a css property for images.
... value auto | <length> | <percentage> default value auto (treated as 0) animatable yes note: starting with svg2, width is a
geometry property meaning this attribute can also be used as a css property for rectangles.
...And 3 more matches
x - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 0 animatable yes note: starting with svg2, x is a
geometry property meaning this attribute can also be used as a css property for <foreignobject>.
... value <length> | <percentage> default value 0 animatable yes note: starting with svg2, x is a
geometry property meaning this attribute can also be used as a css property for images.
... value <length> | <percentage> default value 0 animatable yes note: starting with svg2, x is a
geometry property meaning this attribute can also be used as a css property for rectangles.
...And 3 more matches
y - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 0 animatable yes note: starting with svg2, y is a
geometry property meaning this attribute can also be used as a css property for <foreignobject>.
... value <length> | <percentage> default value 0 animatable yes note: starting with svg2, y is a
geometry property meaning this attribute can also be used as a css property for images.
... value <length> | <percentage> default value 0 animatable yes note: starting with svg2, y is a
geometry property meaning this attribute can also be used as a css property for rectangles.
...And 3 more matches
Notes on HTML Reflow - Archive of obsolete content
overview reflow is the process by which the
geometry of the layout engine's formatting objects are computed.
...html uses a flow based layout model, meaning that most of the time it is possible to compute the
geometry in a single pass.
... elements later "in the flow" typically do not affect the
geometry of elements that are earlier "in the flow", so layout can proceed left-to-right, top-to-bottom through the document.
...And 2 more matches
Building up a basic demo with A-Frame - Game development
adding some advanced
geometry we have a cube on the scene already; now let's try adding more shapes.
...let's try adding a torus — add this element below the previous code: <a-entity
geometry=" primitive: torus; radius: 1; radiustubular: 0.1; segmentstubular: 12;" rotation="10 0 0" position="-3 1 0"> </a-entity> our entity has a torus primitive, which represents its shape.
...edit the <a-entity> defining the torus to look like the following: <a-entity
geometry=" primitive: torus; radius: 1; radiustubular: 0.1; segmentstubular: 12;" material=" color: #eaeff2; roughness: 0.1; metalness: 0.5;" rotation="10 0 0" position="-3 1 0"> </a-entity> in the new material attribute, we set up the color of the material, then its roughness (a rougher material will scatter reflected light in more directions than a smooth material) an...
...And 2 more matches
mask - CSS: Cascading Style Sheets
<
geometry-box> if only one <
geometry-box> value is given, it sets both mask-origin and mask-clip.
... if two <
geometry-box> values are present, then the first sets mask-origin and the second sets mask-clip.
... <
geometry-box> | no-clip sets the area that is affected by the mask image.
...And 2 more matches
offset-path - CSS: Cascading Style Sheets
syntax /* default */ offset-path: none; /* function values */ offset-path: ray(45deg closest-side contain); /* url */ offset-path: url(#path); /* shapes */ offset-path: circle(50% at 25% 25%); offset-path: inset(50% 50% 50% 50%); offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%); offset-path: path('m 0,200 q 200,200 260,80 q 290,20 400,0 q 300,100 400,200'); /*
geometry boxes */ offset-path: margin-box; offset-path: stroke-box; /* global values */ offset-path: inherit; offset-path: initial; offset-path: unset; values ray() taking up to three values, defines a path that is a line segment starting from the position of the box and proceeds in the direction defined by the specified angle similar to the css gradient angle where 0deg is up, with positive angles...
... url() references the id of an svg shape -- circle, ellipse, line, path, polygon, polyline, or rect -- using the shape's
geometry as the path.
...an offset path is either a specified path with one or multiple sub-paths or the
geometry of a not-styled basic shape.
...And 2 more matches
patternUnits - SVG: Scalable Vector Graphics
the patternunits attribute indicates which coordinate system to use for the
geometry properties of the <pattern> element.
... only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- all
geometry properties are relative to the current user space --> <pattern id="p1" x="12.5" y="12.5" width="25" height="25" patternunits="userspaceonuse"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- all
geometry properties are relative to the target bounding box --> <pattern id="p2" x=".125" y=".125" width=".25" height=".25" patternunits="objectboundingbox"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- left square with user space tiles --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> <!-- right square with bounding box tiles --> <rect x="110" y="10" w...
...idth="80" height="80" fill="url(#p2)" /> </svg> pattern for <pattern>, patternunits defines the coordinate system in use for the
geometry properties (x, y, width and height) of the element.
...And 2 more matches
SVGCircleElement - Web APIs
="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svg
geometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
geometryelement</text></a><polyline points="81,89 71,84 71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="71" y1="89" x...
..."160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-39" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcircleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svg
geometryelement.
... methods this interface has no methods but inherits methods from its parent, svg
geometryelement.
... candidate recommendation replaced the inheritance from svgelement, svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svg
geometryelement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgcircleelement' in that specification.
SVGLineElement - Web APIs
="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svg
geometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
geometryelement</text></a><polyline points="81,89 71,84 71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="71" y1="89" x...
...h="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-29" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svglineelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svg
geometryelement.
... methods this interface doesn't implement any specific methods, but inherits methods from its parent interface, svg
geometryelement.
... candidate recommendation changed the inheritance from svgelement to svg
geometryelement and removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable.
SVGPolygonElement - Web APIs
="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svg
geometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
geometryelement</text></a><polyline points="81,89 71,84 71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="71" y1="89" x...
...4dde4" stroke-width="2px" /><text x="-44" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpolygonelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent, svg
geometryelement and also implements properties from svganimatedpoints.
... methods this interface doesn't implement any specific methods, but inherits methods from its parent, svg
geometryelement.
... candidate recommendation replaced the inheritance from svgelementsvgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svg
geometryelement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgpolygonelement' in that specification.
SVGPolylineElement - Web APIs
="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svg
geometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
geometryelement</text></a><polyline points="81,89 71,84 71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="71" y1="89" x...
...dde4" stroke-width="2px" /><text x="-49" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpolylineelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent, svg
geometryelement and also implements properties from svganimatedpoints.
... methods this interface doesn't implement any specific methods, but inherits methods from its parent, svg
geometryelement.
... candidate recommendation replaced the inheritance from svgelementsvgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svg
geometryelement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgpolylineelement' in that specification.
SVGRectElement - Web APIs
="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svg
geometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
geometryelement</text></a><polyline points="81,89 71,84 71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="71" y1="89" x...
...h="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-29" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrectelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svg
geometryelement.
... methods this interface doesn't implement any specific methods, but inherits methods from its parent, svg
geometryelement.
... candidate recommendation replaced the inheritance from svgelementsvgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svg
geometryelement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgrectelement' in that specification.
WebGL model view projection - Web APIs
the
geometry at the edges becomes more and more distorted, equivalent to a wide angle lens.
... farclippingplanedistance a positive number indicating the distance to the plane beyond which
geometry is clipped away.
...this value should be kept reasonably close to the distance of the
geometry in order to avoid precision errors creeping in while rendering.
...= 15 * math.sin(now * 0.0017); // move the camera around var position = mdn.translatematrix(moveleftandright, 0, 50 + moveinandout ); // multiply together, make sure and read them in opposite order var matrix = mdn.multiplyarrayofmatrices([ // exercise: rotate the camera view position ]); // inverse the operation for camera movements, because we are actually // moving the
geometry in the scene, not the camera itself.
maskUnits - SVG: Scalable Vector Graphics
the maskunits attribute indicates which coordinate system to use for the
geometry properties of the <mask> element.
...nuse units --> <use mask="url(#mymask1)" xlink:href="#r1" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r2" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r3" fill="red" /> <!-- the last rect is masked with objectboundingbox units --> <use mask="url(#mymask2)" xlink:href="#r4" fill="red" /> </svg> mask for <mask>, maskunits defines the coordinate system in use for the
geometry attributes (x, y, width and height) of the element.
... value userspaceonuse | objectboundingbox default value objectboundingbox animatable yes userspaceonuse this value indicates that all coordinates for the
geometry attributes refer to the user coordinate system as defined when the mask was created.
... objectboundingbox this value indicates that all coordinates for the
geometry attributes represent fractions or percentages of the bounding box of the element to which the mask is applied.
SVG documentation index - SVG: Scalable Vector Graphics
136 maskunits svg, svg attribute the maskunits attribute indicates which coordinate system to use for the
geometry properties of the <mask> element.
... 161 patternunits svg, svg attribute the patternunits attribute indicates which coordinate system to use for the
geometry properties of the <pattern> element.
...the resulting image, which is an rgba opaque image, depends on the light color, light position and surface
geometry of the input bump map.
...the resulting image depends on the light color, light position and surface
geometry of the input bump map.
Layout System Overview - Archive of obsolete content
frames are an encapsulation of a region on the screen, a region that contains
geometry (size and location, stacking order).
...the css formatting requirements present two distinct layout models: 1) the in-flow model, where the
geometry of an element is influenced by the
geometry of the elements that precede it, and 2) the positioned model, where the
geometry of an element is not influenced by the
geometry of the elements that precede it, or in any case, is influenced more locally.
...in the normal in-flow case this is quite natural because the sequential addition of new content results in sequential addition of new frames, and because everything is in-flow, the new frames do not influence the
geometry of the frames that have already been formatted.
Explaining basic 3D theory - Game development
you can build
geometry using this information — here is an example of a cube: a face of the given shape is a plane between vertices.
...the
geometry is built from a vertex and the face, while material is a texture, which uses a color or an image.
... if we connect the
geometry with the material we will get a mesh.
Drawing graphics - Learn web development
add the following chunk of code at the bottom of your javascript: let cube; let loader = new three.textureloader(); loader.load( 'metal003.png', function (texture) { texture.wraps = three.repeatwrapping; texture.wrapt = three.repeatwrapping; texture.repeat.set(2, 2); let
geometry = new three.box
geometry(2.4, 2.4, 2.4); let material = new three.meshlambertmaterial( { map: texture, shading: three.flatshading } ); cube = new three.mesh(
geometry, material); scene.add(cube); draw(); }); there's a bit more to take in here, so let's go through it in stages: we first create a cube global variable so we can access our cube from anywhere in the code.
...next, we create a new box
geometry object and a new meshlambertmaterial object, and bring them together in a mesh to create our cube.
... an object typically requires a
geometry (what shape it is) and a material (what its surface looks like).
Animating CSS properties - Firefox Developer Tools
layout: next, the browser uses the computed styles to figure out the position and
geometry for the elements.
... css property cost in the context of the rendering waterfall, some properties are more expensive than others: property type cost examples properties that affect an element's
geometry or position trigger a style recalculation, a layout and a repaint.
... left max-width border-width margin-left font-size properties that don't affect
geometry or position, but are not rendered in their own layer, do not trigger a layout.
Waterfall - Firefox Developer Tools
layout: next, the browser uses the computed styles to figure out the position and
geometry for the elements.
...changing properties that can alter an object's
geometry and position, such as width, display, font-size, or top, will cause a reflow.
... however, changing properties that don't alter
geometry or position, such as color or opacity, will not.
PointerEvent - Web APIs
the pointerevent interface represents the state of a dom event produced by a pointer such as the
geometry of the contact point, the device type that generated the event, the amount of pressure that was applied on the contact surface, etc.
... pointerevent.width read only the width (magnitude on the x axis), in css pixels, of the contact
geometry of the pointer.
... pointerevent.height read only the height (magnitude on the y axis), in css pixels, of the contact
geometry of the pointer.
Pointer events - Web APIs
additionally, a pointer event contains the usual properties present in mouse events (client coordinates, target element, button states, etc.) in addition to new properties for other forms of input: pressure, contact
geometry, tilt, etc.
... width the width (magnitude on the x axis), in css pixels, of the contact
geometry of the pointer.
... height the height (magnitude on the y axis), in css pixels, of the contact
geometry of the pointer.
SVGEllipseElement - Web APIs
="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svg
geometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
geometryelement</text></a><polyline points="81,89 71,84 71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="71" y1="89" x...
...t="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-44" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgellipseelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svg
geometryelement.
... methods this interface doesn't implement any specific methods, but inherits methods from its parent interface, svg
geometryelement.
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
there are a few articles about the fundamental math,
geometry, and other concepts behind webgl and webxr which may be useful to read before or while reading this one, including: explaining basic 3d theory matrix math for the web webgl model view projection
geometry and reference spaces in webxr ed.
...for more detail on the subject, see the articles
geometry and reference spaces, webgl model view projection, and matrix math for the web.
... if you start each frame's rendering pass by computing the perspective matrix, you can then multply into that matrix all the other transforms you need to apply in order to result in the frame's desired
geometry.
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
note: this article presumes that you are familiar with the concepts introduced in
geometry and reference spaces in webxr: that is, the basics of 3d coordinate systems, as well as webxr spaces, reference spaces, and how reference spaces are used to create local coordinate systems for individual objects or movable components within a scene.
... representing a position using a reference space as covered in defining spatial relationships with reference spaces in
geometry and reference spaces in webxr, reference spaces establish a local coordinate system which is offset from another coordinate system that is itself defined by some other space.
...any time the bounds
geometry of the user's space changes, a reset is sent.
Animation performance and frame rate - Web Performance
layout: next, the browser uses the computed styles to figure out the position and
geometry for the elements.
... css property cost in the context of the rendering waterfall, some properties are more expensive than others: property type cost examples properties that affect an element's
geometry or position trigger a style recalculation, a layout and a repaint.
... left max-width border-width margin-left font-size properties that don't affect
geometry or position, but are not rendered in their own layer, do not trigger a layout.
clip-path - SVG: Scalable Vector Graphics
ght:100% } <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <clippath id="myclip" clippathunits="objectboundingbox"> <circle cx=".5" cy=".5" r=".5" /> </clippath> <!-- top-left: apply a custom defined clipping path --> <rect x="1" y="1" width="8" height="8" stroke="green" clip-path="url(#myclip)" /> <!-- top-right: apply a css basic shape on a fill-box
geometry.
... this is the same as having a custom clipping path with a clippathunits set to objectboundingbox --> <rect x="11" y="1" width="8" height="8" stroke="green" clip-path="circle() fill-box" /> <!-- bottom-left --> <rect x="1" y="11" width="8" height="8" stroke="green" clip-path="circle() stroke-box" /> <!-- bottom-right: apply a css basic shape on a view-box
geometry.
... this is the same as having a custom clipping path with a clippathunits set to userspaceonuse --> <rect x="11" y="11" width="8" height="8" stroke="green" clip-path="circle() view-box" /> </svg> usage notes value <url> | [ <basic-shape> || <
geometry-box> ] | none default value none animatable yes <
geometry-box> an extra information to tell how a <basic-shape> is applied to an element: fill-box indicates to use the object bounding box; stroke-box indicates to use the object bounding box extended with the stroke; view-box indicates to use the nearest svg viewport as the reference box.
cx - SVG: Scalable Vector Graphics
value <length-percentage> default value 0 animatable yes note: starting with svg2 cx, is a
geometry property, meaning this attribute can also be used as css property for circles.
... value <length-percentage> default value 0 animatable yes note: starting with svg2 cx, is a
geometry property, meaning this attribute can also be used as css property for ellipses.
... candidate recommendation definition as a
geometry property scalable vector graphics (svg) 2the definition of 'cx' in that specification.
cy - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 0 animatable yes note: starting with svg2, cy is a
geometry property meaning this attribute can also be used as a css property for circles.
... value <length> | <percentage> default value 0 animatable yes note: starting with svg2, cy is a
geometry property meaning this attribute can also be used as a css property for ellipses.
... candidate recommendation definition as a
geometry property scalable vector graphics (svg) 2the definition of 'cy' in that specification.
rx - SVG: Scalable Vector Graphics
value <length> | <percentage> | auto default value auto animatable yes note: starting with svg2, rx is a
geometry property meaning this attribute can also be used as a css property for ellipses.
... value <length> | <percentage> | auto default value auto animatable yes note: starting with svg2, rx is a
geometry property meaning this attribute can also be used as a css property for rects.
... candidate recommendation definition as a
geometry property scalable vector graphics (svg) 1.1 (second edition)the definition of 'rx' in that specification.
ry - SVG: Scalable Vector Graphics
value <length> | <percentage> | auto default value auto animatable yes note: starting with svg2, ry is a
geometry property meaning this attribute can also be used as a css property for ellipses.
... value <length> | <percentage> | auto default value auto animatable yes note: starting with svg2, ry is a
geometry property meaning this attribute can also be used as a css property for rects.
... candidate recommendation definition as a
geometry property scalable vector graphics (svg) 1.1 (second edition)the definition of 'ry' in that specification.
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
domrect or domrectreadonly instead of svgrect implementation status unknown dompoint or dompointreadonly instead of svgpoint implementation status unknown members of svgstylable and svglangspace available in svgelement implementation status unknown svggraphicselement instead of svglocatable and svgtransformable implementation status unknown svg
geometryelement with svg
geometryelement.ispointinfill() and svg
geometryelement.ispointinstroke() methods partially implemented (bug 1239100).
...toelement() removed not removed yet svggraphicselement.getctm() on the outermost element implementation status unknown animval attribute alias of baseval implementation status unknown dataset attribute for svgelement implementation status unknown moved pathlength attribute and gettotallength() and getpointatlength() methods from svgpathelement to svg
geometryelement implemented (bug 1239100) document structure change notes svgsvgelement.suspendredraw(), svgsvgelement.unsuspendredraw(), and svgsvgelement.unsuspendredrawall() deprecated turned into no-ops (bug 734079) externalresourcesrequired attribute removed implementation status unknown auto value for width and height in <image> implemen...
... status unknown presentation attributes on any svg namespaced element implementation status unknown display behavior of <style> defined via ua style sheet implementation status unknown !important user agent style rules controlling never-rendered elements implementation status unknown :focus and ::selection styles implementation status unknown
geometry change notes x and y attributes removed from <pattern> and <filter> implementation status unknown auto value of width and height computes to 0 but 100% on <svg> not implemented coordinate systems, transformations and units change notes exception for bad values on svgmatrix.skewx() and svgmatrix.skewy() implementation sta...
Building up a basic demo with Babylon.js - Game development
geometry now the scene is properly rendering we can start adding 3d shapes to it.
...let's start by defining the
geometry for a box shape — add the following new code below your previous additions: var box = babylon.mesh.createbox("box", 2, scene); a mesh is a way the engine creates geometric shapes, so material can be easily applied to them later on.
Building up a basic demo with the PlayCanvas engine - Game development
geometry now the scene is properly rendering we can start adding 3d shapes to it.
...let's start by defining the
geometry for a cube shape — add the following new code below your previous additions: var box = new pc.entity(); box.addcomponent("model", { type: "box" }); app.root.addchild(box); box.rotate(10, 15, 0); it will create an entity with the box model component and add it to the root of the application, our scene.
GLSL Shaders - Game development
then, in the line that defines the cube we need to replace the basicmaterial: var cube = new three.mesh(box
geometry, basicmaterial); ...with the newly created shadermaterial: var cube = new three.mesh(box
geometry, shadermaterial); three.js compiles and runs the shaders attached to the mesh to which this material is given.
...idth; var height = window.innerheight; var renderer = new three.webglrenderer({antialias:true}); renderer.setsize(width, height); renderer.setclearcolor(0xdddddd, 1); document.body.appendchild(renderer.domelement); var scene = new three.scene(); var camera = new three.perspectivecamera(70, width/height); camera.position.z = 50; scene.add(camera); var box
geometry = new three.box
geometry(10, 10, 10); var shadermaterial = new three.shadermaterial( { vertexshader: document.getelementbyid( 'vertexshader' ).textcontent, fragmentshader: document.getelementbyid( 'fragmentshader' ).textcontent }); var cube = new three.mesh(box
geometry, shadermaterial); scene.add(cube); cube.rotation.set(0.4, 0.2, 0); function render() { ...
Experimental features in Firefox
nightly 66 no developer edition 66 no beta 66 no release 66 no preference name dom.media.autoplay.autoplay-policy-api
geometryutils methods: convertpointfromnode(), convertrectfromnode(), and convertquadfromnode() the
geometryutils methods convertpointfromnode(), convertrectfromnode(), and convertquadfromnode() map the given point, rectangle, or quadruple from the node on which they're called to another node.
... nightly 31 yes developer edition 31 no beta 31 no release 31 no preference name layout.css.getboxquads.enabled
geometryutils method: getboxquads() the
geometryutils method getboxquads() returns the css boxes for a node relative to any other node or viewport.
Shader Editor - Firefox Developer Tools
if you hover over an entry in the list, the
geometry drawn by that program is highlighted in red: if you click the eyeball icon just left of the program's entry, that program is disabled.
... this is useful for focusing on certain shaders or hiding overlapping
geometry: if you click the entry, its vertex and fragment shaders are shown in the other two panes, and you can edit them.
PointerEvent.height - Web APIs
the height read-only property of the pointerevent interface represents the height of the pointer's contact
geometry, along the y-axis (in css pixels).
... if the input hardware cannot report the contact
geometry to the browser, the height defaults to 1.
PointerEvent.width - Web APIs
the width read-only property of the pointerevent interface represents the width of the pointer's contact
geometry along the x-axis, measured in css pixels.
... if the input hardware cannot report the contact
geometry to the browser, the width defaults to 1.
SVGDescElement - Web APIs
h="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgdescelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svg
geometryelement.
... methods this interface has no methods but inherits methods from its parent, svg
geometryelement.
SVGMeshElement - Web APIs
stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmeshelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svg
geometryelement, and implements the properties of svgurireference.
... methods this interface doesn't implement any specific methods, but inherits methods from its parent interface, svg
geometryelement, and implements the methods of svgurireference.
WebGL by example - Web APIs
the examples are sorted according to topic and level of difficulty, covering the webgl rendering context, shader programming, textures,
geometry, user interaction, and more.
... instead of trying to juggle shaders,
geometry, and working with gpu memory, already in the first program, the examples here explore webgl in an incremental way.
Starting up and shutting down a WebXR session - Web APIs
to understand how to select the right reference space for your needs, see selecting the reference space type in
geometry and reference spaces in webxr.
... another common cause for reset events is when a bounded reference space (a reference space whose xrreferencespacetype is bounded-floor) has its
geometry as specified by the xrboundedreferencespace's property bounds
geometry change.
XRReferenceSpace - Web APIs
xrreferencespacetype description interface bounded-floor similar to the local type, except the user is not expected to move outside a predetermined boundary, given by the bounds
geometry in the returned object.
...
geometry the native origin of any xrreferencespace is always configured so that +x is considered to be to the right, +y is upward, and +z is "backward" or toward the user.
Web APIs
ntry filesystemdirectoryreader filesystementry filesystementrysync filesystemfileentry filesystemflags filesystemsync focusevent fontface fontfaceset fontfacesetloadevent formdata formdataentryvalue formdataevent fullscreenoptions g gainnode gamepad gamepadbutton gamepadevent gamepadhapticactuator geolocation geolocationcoordinates geolocationposition geolocationpositionerror
geometryutils gestureevent globaleventhandlers gyroscope h htmlanchorelement htmlareaelement htmlaudioelement htmlbrelement htmlbaseelement htmlbasefontelement htmlbodyelement htmlbuttonelement htmlcanvaselement htmlcollection htmlcontentelement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldivelement htmldocument htmlelement htmlembedelement html...
...enodeelement svgfemorphologyelement svgfeoffsetelement svgfepointlightelement svgfespecularlightingelement svgfespotlightelement svgfetileelement svgfeturbulenceelement svgfilterelement svgfilterprimitivestandardattributes svgfontelement svgfontfaceelement svgfontfaceformatelement svgfontfacenameelement svgfontfacesrcelement svgfontfaceurielement svgforeignobjectelement svggelement svg
geometryelement svgglyphelement svgglyphrefelement svggradientelement svggraphicselement svghkernelement svgimageelement svglength svglengthlist svglineelement svglineargradientelement svgmpathelement svgmaskelement svgmatrix svgmeshelement svgmetadataelement svgmissingglyphelement svgnumber svgnumberlist svgpathelement svgpatternelement svgpoint svgpolygonelement svgpolylineelement svgpreserv...
mask-clip - CSS: Cascading Style Sheets
/* <
geometry-box> values */ mask-clip: content-box; mask-clip: padding-box; mask-clip: border-box; mask-clip: margin-box; mask-clip: fill-box; mask-clip: stroke-box; mask-clip: view-box; /* keyword values */ mask-clip: no-clip; /* non-standard keyword values */ -webkit-mask-clip: border; -webkit-mask-clip: padding; -webkit-mask-clip: content; -webkit-mask-clip: text; /* multiple values */ mask-clip: padding-box, no-clip; mask-clip: view-box, fill-box, border-box; /* global values */ mask-clip: inherit; mask-clip: initial; mask-clip: unset; syntax one or more of the keyword values listed below, separated by commas.
... formal definition initial valueborder-boxapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ <
geometry-box> | no-clip ]#where <
geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples clipping a mask to the border box css #masked { width: 100px; height: 100px; background-color: #8cffa0; margin: 20px; border: 20px solid #8ca0ff; padding: 20px; mask-image: url(https://mdn.mozilla...
display - SVG: Scalable Vector Graphics
the
geometry of a graphics element with display set to none is not included in bounding box and clipping paths calculations.
...for example, setting it to none on a <path> element will prevent that element from getting rendered directly onto the canvas, but the <path> element can still be referenced by a <textpath> element; furthermore, its
geometry will be used in text-on-a-path processing even if the <path> has a display value of none.
r - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 0 animatable yes note: starting with svg2, r is a
geometry property meaning this attribute can also be used as a css property for circles.
... candidate recommendation definition as a
geometry property scalable vector graphics (svg) 2the definition of 'r' in that specification.
<clipPath> - SVG: Scalable Vector Graphics
--> <use clip-path="url(#myclip)" xlink:href="#heart" fill="red" /> </svg> /* with a touch of css for browsers who * * implemented the r
geometry property.
...thus, it affects the rendering of an element, but not the element's inherent
geometry.
CSS3 - Archive of obsolete content
css display module level 3 candidate recommendation css will change module level 1 candidate recommendation media queries level 4 candidate recommendation
geometry interfaces module level 1 candidate recommendation css cascading and inheritance level 4 candidate recommendation css scroll snap module level 1 candidate recommendation css painting api level 1 working draft css containment module level 1 recommendation ...
Space Manager High Level Design - Archive of obsolete content
bandrects are a linked list (provided by prcliststr super-class) and also provide some
geometry-management methods (splitvertically, splithorizontally) and some methods that query or manipulate the frames associated with the band (isoccupiedby, addframe, removeframe).
3D collision detection - Game development
if you have entities that will be rotating, you can either modify the dimensions of the bounding box so it still wraps the object, or opt to use another bounding
geometry type, such as spheres (which are invariant to rotation.) the animated gif below shows a graphic example of an aabb that adapts its size to fit the rotating entity.
Physics - Game development
we don't need any heavy
geometry calculations — after all it's just a ball bouncing off walls and bricks.
create fancy boxes - Learn web development
the box-shadow property allow us to create inner light and a flat drop shadow effect, but with some little extra work it becomes possible to create a more natural
geometry by using pseudo-element and the transform property.
Eclipse CDT
this define is in nsdomclassinfoid.h, which is included via the following include chain: content/svg/content/src/nssvgellipseelement.cpp content/svg/content/src/nssvgpath
geometryelement.h content/svg/content/src/nssvggraphicelement.h content/svg/content/src/nssvgstylableelement.h content/svg/content/src/nssvgelement.h content/base/src/nsgenericelement.h obj-debug/dist/include/nsdomclassinfoid.h in nsdomclassinfoid.h the ns_dom_interface_map_entry_classinfo define is behind an |ifdef _impl_ns_layout|.
Introduction to Layout in Mozilla
reset style context object is a placeholder for partially computed stylistic data style data is computed lazily, as it is asked for reflow recursively compute
geometry (x, y, w, h) for frames, views, and widgets given w & h constraints of “root frame” compute (x, y, w, h) for all children constraints propagated “down” via nshtmlreflowstate desired size returned “up” via nshtmlreflowmetrics basic pattern parent frame initializes child reflow state (available w, h); places child frame (x, y); invokes child’s ...
JavaScript code modules
geometry.jsm provides routines for performing basic geometric operations on points and rectangles.
CSS Object Model (CSSOM) - Web APIs
terstylerule cssfontfacerule cssfontfeaturevaluesmap cssfontfeaturevaluesrule cssgroupingrule cssimportrule csskeyframerule csskeyframesrule cssmarginrule cssmediarule cssnamespacerule csspagerule cssrule cssrulelist cssstyledeclaration cssstylesheet cssstylerule csssupportsrule cssvariablesmap cssviewportrule elementcssinlinestyle fontface fontfaceset fontfacesetloadevent
geometryutils getstyleutils linkstyle medialist mediaquerylist mediaquerylistevent mediaquerylistlistener screen stylesheet stylesheetlist transitionevent several other interfaces are also extended by the cssom-related specifications: document, window, element, htmlelement, htmlimageelement, range, mouseevent, and svgelement.
DOMMatrix() - Web APIs
4); var scalex = 2; var scaley = 3; var translatex = 12; var translatey = 8; var angle = math.pi / 2; var matrix = new dommatrix([ math.sin(angle) * scalex, math.cos(angle) * scalex, -math.sin(angle) * scaley, math.cos(angle) * scaley, translatex, translatey ]); var transformedpoint = point.matrixtransform(matrix); specifications specification status comment
geometry interfaces module level 1the definition of 'dommatrix' in that specification.
DOMMatrix - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'dommatrix' in that specification.
DOMMatrixReadOnly() - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'dommatrixreadonly' in that specification.
DOMMatrixReadOnly.flipX() - Web APIs
const flipped = document.getelementbyid('flipped'); const matrix = new dommatrixreadonly(); const flippedmatrix = matrix.flipx(); flipped.setattribute('transform', flippedmatrix.tostring()); screenshotlive sample specifications specification status comment
geometry interfaces module level 1the definition of 'dommatrixreadonly.flipx()' in that specification.
DOMMatrixReadOnly.scale() - Web APIs
is2d; if (browserexpectssixparamscale) { scaledmatrixwithorigin = matrix.scale(0.5, 0.5, 1, 25, 25, 0); } document.queryselector('#transformed').setattribute('transform', scaledmatrix.tostring()); document.queryselector('#transformedorigin').setattribute('transform', scaledmatrixwithorigin.tostring()); screenshotlive sample specifications specification status comment
geometry interfaces module level 1the definition of 'dommatrixreadonly.scale()' in that specification.
DOMMatrixReadOnly.translate() - Web APIs
const matrix = new dommatrixreadonly().translate(25, 25); document.queryselector('#transformed').setattribute('transform', matrix.tostring()); screenshotlive sample specifications specification status comment
geometry interfaces module level 1the definition of 'dommatrixreadonly.translate()' in that specification.
DOMMatrixReadOnly - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'dommatrixreadonly' in that specification.
DOMPoint.fromPoint() - Web APIs
var center = dompoint.frompoint({x: 75, y: -50, z: -55, w: 0.25}); specifications specification status comment
geometry interfaces module level 1the definition of 'frompoint()' in that specification.
DOMPoint.DOMPoint() - Web APIs
var windtopleft = new dompoint(window.screenx, window.screeny); var newtopleft = dompoint.frompoint(windtopleft); newtopleft.x += 100; newtopleft.y += 100; specifications specification status comment
geometry interfaces module level 1the definition of 'dompoint()' in that specification.
DOMPoint.w - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'w' in that specification.
DOMPoint.x - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'x' in that specification.
DOMPoint.y - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'y' in that specification.
DOMPoint.z - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'z' in that specification.
DOMPoint - Web APIs
dtotwo(position.z)); console.log('xr viewer orientation: {x: ' + roundtotwo(orientation.x) + ', y: ' + roundtotwo(orientation.y) + ', z: ' + roundtotwo(orientation.z) + ', w: ' + roundtotwo(orientation.w)); } } specifications specification status comment
geometry interfaces module level 1the definition of 'dompoint' in that specification.
DOMPointInit.w - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'w' in that specification.
DOMPointInit.x - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'x' in that specification.
DOMPointInit.y - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'y' in that specification.
DOMPointInit.z - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'z' in that specification.
DOMPointInit - Web APIs
const pointdesc = { x: window.screenx, y: window.screeny, z: 5.0 }; const windtopleft = dompoint.frompoint(pointdesc) specifications specification status comment
geometry interfaces module level 1the definition of 'dompointreadonly.frompoint()' in that specification.
DOMPointReadOnly() - Web APIs
var point2d = new dompointreadonly(50, 25); var point3d = new dompointreadonly(50, 0, 10); var perspectivepoint3d = new dompointreadonly(50, 50, 25, 0.5); specifications specification status comment
geometry interfaces module level 1the definition of 'dompointreadonly' in that specification.
DOMPointReadOnly.fromPoint() - Web APIs
const origpoint = new dompoint(25, 25, 100, 0.5) const newpoint = dompointreadonly.frompoint(origpoint) specifications specification status comment
geometry interfaces module level 1the definition of 'frompoint()' in that specification.
DOMPointReadOnly.toJSON() - Web APIs
var topleft = new dompoint(window.screenx, window.screeny); var pointjson = topleft.tojson(); specifications specification status comment
geometry interfaces module level 1the definition of 'dompointreadonly.tojson()' in that specification.
DOMPointReadOnly.w - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'w' in that specification.
DOMPointReadOnly.x - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'x' in that specification.
DOMPointReadOnly.y - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'y' in that specification.
DOMPointReadOnly.z - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'z' in that specification.
DOMPointReadOnly - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'dompoint' in that specification.
DOMQuad - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'domquad' in that specification.
DOMRect.DOMRect() - Web APIs
examples to create a new domrect, you could run a line of code like so: mydomrect = new domrect(0,0,100,100); // running 'mydomrect' in the console would then return // domrect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 } specifications specification status comment
geometry interfaces module level 1the definition of 'domrect()' in that specification.
DOMRect - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'domrect' in that specification.
DOMRectReadOnly() - Web APIs
examples to create a new dompoint, you could run a line of code like so: const mydomrect = new domrectreadonly(0, 0, 100, 100) // running 'mydomrect' in the console would then return // domrect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 } specifications specification status comment
geometry interfaces module level 1the definition of 'domrectreadonly()' in that specification.
DOMRectReadOnly.left - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'left' in that specification.
DOMRectReadOnly.top - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'top' in that specification.
DOMRectReadOnly.x - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'x' in that specification.
DOMRectReadOnly.y - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'y' in that specification.
DOMRectReadOnly - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'domrectreadonly' in that specification.
Document.createDocumentFragment() - Web APIs
since the document fragment is in memory and not part of the main dom tree, appending children to it does not cause page reflow (computation of element's position and
geometry).
Document Object Model (DOM) - Web APIs
emorphologyelement svgfeoffsetelement svgfepointlightelement svgfespecularlightingelement svgfespotlightelement svgfetileelement svgfeturbulenceelement svgfilterelement svgfilterprimitivestandardattributes svgfontelement svgfontfaceelement svgfontfaceformatelement svgfontfacenameelement svgfontfacesrcelement svgfontfaceurielement svgforeignobjectelement svggelement svg
geometryelement svgglyphelement svgglyphrefelement svggradientelement svggraphicselement svghatchelement svghatchpathelement svghkernelement svgimageelement svglineargradientelement svglineelement svgmarkerelement svgmaskelement svgmeshelement svgmeshgradientelement svgmeshpatchelement svgmeshrowelement svgmetadataelement svgmissingglyphelement svgmpathelement svg...
Point - Web APIs
although it is not directly related to this defunct interface, you are probably looking for dompoint, which is part of the
geometry interfaces module level 1 specification.
getBBox() - Web APIs
the coordinates returned are with respect to the current svg space (after the application of all
geometry attributes on all the elements contained in the target element).
SVGRect - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'domrect' in that specification.
WebKitCSSMatrix - Web APIs
specifications specification status comment
geometry interfaces module level 1the definition of 'webkitcssmatrix' in that specification.
WebXR application life cycle - Web APIs
this serves as preparation for the next few articles in these webxr guides, which cover starting up and shutting down a webxr session,
geometry, simulating cameras, spatial tracking, and more.
Lighting a WebXR setting - Web APIs
the color of each pixel in the final, rendered, scene is calculated using some intricate math that factors in things like: the color of the texture element (the pixel within the texture mapped onto the object; also known as a texel) corresponding to the screen pixel, given the object
geometry, the viewer position and orientation relative to each polygon, and so forth.
WebXR Device API - Web APIs
geometry and reference spaces in webxr in this guide, the required concepts of 3d
geometry are briefly reviewed, and the fundamentals of how that
geometry is represented in webxr are detailed.
XRBoundedReferenceSpace - Web APIs
properties in addition to the properties of xrreferencespace, xrboundedreferencespace includes the following: bounds
geometry read only an array of dompointreadonly objects, each of which defines a vertex in the polygon defining the boundaries within which the user will be required to remain.
XRPermissionDescriptor.optionalFeatures - Web APIs
xrreferencespacetype description interface bounded-floor similar to the local type, except the user is not expected to move outside a predetermined boundary, given by the bounds
geometry in the returned object.
XRPermissionDescriptor.requiredFeatures - Web APIs
xrreferencespacetype description interface bounded-floor similar to the local type, except the user is not expected to move outside a predetermined boundary, given by the bounds
geometry in the returned object.
XRPermissionStatus.granted - Web APIs
xrreferencespacetype description interface bounded-floor similar to the local type, except the user is not expected to move outside a predetermined boundary, given by the bounds
geometry in the returned object.
XRReferenceSpaceType - Web APIs
xrreferencespacetype description interface bounded-floor similar to the local type, except the user is not expected to move outside a predetermined boundary, given by the bounds
geometry in the returned object.
XRSession.requestReferenceSpace() - Web APIs
xrreferencespacetype description interface bounded-floor similar to the local type, except the user is not expected to move outside a predetermined boundary, given by the bounds
geometry in the returned object.
Coordinate systems - CSS: Cascading Style Sheets
this means that the position of a given point within a document will change if the containing window is moved, for example, or if the user's screen
geometry changes (by changing display resolution or by adding or removing monitors to their system).
mask-origin - CSS: Cascading Style Sheets
formal definition initial valueborder-boxapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <
geometry-box>#where <
geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples setting mask origin to border-box css #masked { width: 100px; height: 100px; margin: 10px; border: 10px solid blue; background-color: #8cffa0; padding: 10px; mask-image: url(https://mdn.mozillademos.org/file...
url() - CSS: Cascading Style Sheets
the following are all valid and equivalent: <css_property>: url("https://example.com/image.png") <css_property>: url('https://example.com/image.png') <css_property>: url(https://example.com/image.png) path references the id of an svg shape -- circle, ellipse, line, path, polygon, polyline, or rect -- using the shape's
geometry as the path.
<circle> - SVG: Scalable Vector Graphics
value type: <number> ; default value: none; animatable: yes note: starting with svg2, cx, cy, and r are
geometry properties, meaning those attributes can also be used as css properties for that element.