Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Re-using pattern fills #592

Open
wants to merge 1 commit into from

4 participants

@narenranjit

While using patterns (from external images) as a fill, i.e., fill:url(img.gif) the library was always appending new pattern elements to the dom rather than re-using existing ones. This causes a noticeable flicker on some cases while there is a new http request to get the image file.

Try http://forio.com/simulate/latinovote/map on firefox and move the sliders to see the flickering version. If you inspect the dom you can see the new patterns being attend each time the slider moves.

Try http://latinovotemap.org with the fixed version to see that there is no flicker.

Great library btw!

@m90

:+1: fixed the same problem for me. Thanks!

@marlonbaeten

When the offset of the pattern fill matters, this fix introduces the problem that the position (translation) of the pattern is updated for every new elements using the same fill.

@gka

+1 for this pull request. here's the patch applied to version 2.1.2 https://gist.github.com/gka/6768991

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 26 additions and 16 deletions.
  1. +26 −16 raphael.js
View
42 raphael.js
@@ -4211,23 +4211,33 @@ window.Raphael.svg && function (R) {
case "fill":
var isURL = Str(value).match(R._ISURL);
if (isURL) {
- el = $("pattern");
- var ig = $("image");
- el.id = R.createUUID();
- $(el, {x: 0, y: 0, patternUnits: "userSpaceOnUse", height: 1, width: 1});
- $(ig, {x: 0, y: 0, "xlink:href": isURL[1]});
- el.appendChild(ig);
+ var existingImages = o.paper.defs.getElementsByTagName("image");
+ for(var i=0; i< existingImages.length; i++){
+ if(existingImages[i].href.baseVal === isURL[1]){
+ el = existingImages[i].parentNode;
+ }
+ }
+ if(!el){
+ el = $("pattern");
+ var ig = $("image");
+ el.id = R.createUUID();
+ $(el, {x: 0, y: 0, patternUnits: "userSpaceOnUse", height: 1, width: 1});
+ $(ig, {x: 0, y: 0, "xlink:href": isURL[1]});
+ el.appendChild(ig);
- (function (el) {
- R._preload(isURL[1], function () {
- var w = this.offsetWidth,
- h = this.offsetHeight;
- $(el, {width: w, height: h});
- $(ig, {width: w, height: h});
- o.paper.safari();
- });
- })(el);
- o.paper.defs.appendChild(el);
+ (function (el) {
+ R._preload(isURL[1], function () {
+ var w = this.offsetWidth,
+ h = this.offsetHeight;
+ $(el, {width: w, height: h});
+ $(ig, {width: w, height: h});
+ o.paper.safari();
+ });
+ })(el);
+
+ o.paper.defs.appendChild(el);
+ }
+
$(node, {fill: "url(#" + el.id + ")"});
o.pattern = el;
o.pattern && updatePosition(o);
Something went wrong with that request. Please try again.