aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorwout <wout@impinc.co.uk>2013-04-22 09:57:25 +0100
committerwout <wout@impinc.co.uk>2013-04-22 09:57:25 +0100
commit11ded2fe8fabf4392633fcdb3713a49e084746a1 (patch)
tree16c325b6261d8159bade92faf6b763acbccad148 /src
parenta736acc12e4ca1a71b9f563f7ed361e2a3540469 (diff)
downloadsvg.js-11ded2fe8fabf4392633fcdb3713a49e084746a1.tar.gz
svg.js-11ded2fe8fabf4392633fcdb3713a49e084746a1.zip
Added the rbox() method, bumped to v0.140.15
Diffstat (limited to 'src')
-rw-r--r--src/doc.js97
-rw-r--r--src/element.js17
-rw-r--r--src/rbox.js43
3 files changed, 110 insertions, 47 deletions
diff --git a/src/doc.js b/src/doc.js
index cedaefe..faf89c5 100644
--- a/src/doc.js
+++ b/src/doc.js
@@ -7,16 +7,18 @@ SVG.Doc = function(element) {
document.getElementById(element) :
element
- /* set svg element attributes and create the <defs> node */
+ /* If the target is an svg element, use that element as the main wrapper.
+ This allows svg.js to work with svg documents as well. */
this.constructor
.call(this, this.parent.nodeName == 'svg' ? this.parent : SVG.create('svg'))
+ /* set svg element attributes and create the <defs> node */
this
.attr({ xmlns: SVG.ns, version: '1.1', width: '100%', height: '100%' })
.attr('xlink', SVG.xlink, SVG.ns)
.defs()
- /* ensure correct rendering for safari */
+ /* ensure correct rendering */
if (this.parent.nodeName != 'svg')
this.stage()
}
@@ -24,41 +26,64 @@ SVG.Doc = function(element) {
// Inherits from SVG.Container
SVG.Doc.prototype = new SVG.Container
-// Hack for safari preventing text to be rendered in one line.
-// Basically it sets the position of the svg node to absolute
-// when the dom is loaded, and resets it to relative a few milliseconds later.
-SVG.Doc.prototype.stage = function() {
- var check
- , element = this
- , wrapper = document.createElement('div')
-
- /* set temp wrapper to position relative */
- wrapper.style.cssText = 'position:relative;height:100%;'
-
- /* put element into wrapper */
- element.parent.appendChild(wrapper)
- wrapper.appendChild(element.node)
-
- /* check for dom:ready */
- check = function() {
- if (document.readyState === 'complete') {
- element.style('position:absolute;')
- setTimeout(function() {
- /* set position back to relative */
- element.style('position:relative;')
-
- /* remove temp wrapper */
- element.parent.removeChild(element.node.parentNode)
- element.node.parentNode.removeChild(element.node)
- element.parent.appendChild(element.node)
-
- }, 5)
- } else {
- setTimeout(check, 10)
+
+SVG.extend(SVG.Doc, {
+ // Hack for safari preventing text to be rendered in one line.
+ // Basically it sets the position of the svg node to absolute
+ // when the dom is loaded, and resets it to relative a few milliseconds later.
+ // It also handles sub-pixel offset rendering properly.
+ stage: function() {
+ var check
+ , element = this
+ , wrapper = document.createElement('div')
+
+ /* set temporary wrapper to position relative */
+ wrapper.style.cssText = 'position:relative;height:100%;'
+
+ /* put element into wrapper */
+ element.parent.appendChild(wrapper)
+ wrapper.appendChild(element.node)
+
+ /* check for dom:ready */
+ check = function() {
+ if (document.readyState === 'complete') {
+ element.style('position:absolute;')
+ setTimeout(function() {
+ /* set position back to relative */
+ element.style('position:relative;')
+
+ /* remove temporary wrapper */
+ element.parent.removeChild(element.node.parentNode)
+ element.node.parentNode.removeChild(element.node)
+ element.parent.appendChild(element.node)
+
+ /* after wrapping is done, fix sub-pixel offset */
+ element.fixSubPixelOffset()
+
+ /* make sure sub-pixel offset is fixed every time the window is resized */
+ SVG.on(window, 'resize', function() {
+ element.fixSubPixelOffset()
+ })
+
+ }, 5)
+ } else {
+ setTimeout(check, 10)
+ }
}
+
+ check()
+
+ return this
}
+
+ // Fix for possible sub-pixel offset. See:
+ // https://bugzilla.mozilla.org/show_bug.cgi?id=608812
+, fixSubPixelOffset: function() {
+ var pos = this.node.getScreenCTM()
- check()
+ this
+ .style('left', (-pos.e % 1) + 'px')
+ .style('top', (-pos.f % 1) + 'px')
+ }
- return this
-} \ No newline at end of file
+})
diff --git a/src/element.js b/src/element.js
index 8869f2b..df3f82a 100644
--- a/src/element.js
+++ b/src/element.js
@@ -160,7 +160,7 @@ SVG.extend(SVG.Element, {
this.node.setAttributeNS(n, a, v) :
this.node.setAttribute(a, v)
- /* if the passed argument belongs to the style as well, add it there */
+ /* if the passed argument belongs in the style as well, add it there */
if (this._isStyle(a)) {
a == 'text' ?
this.text(v) :
@@ -200,15 +200,6 @@ SVG.extend(SVG.Element, {
/* parse matrix */
o = this._parseMatrix(o)
- /* ensure correct rotation center point */
- if (o.rotation != null) {
- if (o.cx == null)
- o.cx = this.bbox().cx
-
- if (o.cy == null)
- o.cy = this.bbox().cy
- }
-
/* merge values */
for (v in o)
if (o[v] != null)
@@ -231,7 +222,7 @@ SVG.extend(SVG.Element, {
/* add rotation */
if (o.rotation != 0)
- transform.push('rotate(' + o.rotation + ',' + o.cx + ',' + o.cy + ')')
+ transform.push('rotate(' + o.rotation + ',' + (o.cx || this.bbox().cx) + ',' + (o.cy || this.bbox().cy) + ')')
/* add scale */
if (o.scaleX != 1 || o.scaleY != 1)
@@ -329,6 +320,10 @@ SVG.extend(SVG.Element, {
, bbox: function() {
return new SVG.BBox(this)
}
+ // Get rect box
+, rbox: function() {
+ return new SVG.RBox(this)
+ }
// Checks whether the given point inside the bounding box of the element
, inside: function(x, y) {
var box = this.bbox()
diff --git a/src/rbox.js b/src/rbox.js
new file mode 100644
index 0000000..02405b0
--- /dev/null
+++ b/src/rbox.js
@@ -0,0 +1,43 @@
+// Get the rectangular box of a given element
+SVG.RBox = function(element) {
+ var box, zoom
+ , e = element.doc().parent
+ , zoom = element.doc().viewbox().zoom
+
+ /* actual, native bounding box */
+ box = element.node.getBoundingClientRect()
+
+ /* get screen offset */
+ this.x = box.left
+ this.y = box.top
+
+ /* subtract parent offset */
+ this.x -= e.offsetLeft
+ this.y -= e.offsetTop
+
+ while (e = e.offsetParent) {
+ this.x -= e.offsetLeft
+ this.y -= e.offsetTop
+ }
+
+ /* calculate cumulative zoom from svg documents */
+ e = element
+ while (e = e.parent) {
+ if (e.type == 'svg' && e.viewbox) {
+ zoom *= e.viewbox().zoom
+ this.x -= e.x() || 0
+ this.y -= e.y() || 0
+ }
+ }
+
+ /* recalculate viewbox distortion */
+ this.x /= zoom
+ this.y /= zoom
+ this.width = box.width /= zoom
+ this.height = box.height /= zoom
+
+ /* add the center */
+ this.cx = this.x + this.width / 2
+ this.cy = this.y + this.height / 2
+
+} \ No newline at end of file