Databases
StackOverflow2013
Postsdbo
POHow to make a Raphael fill pattern move with the element? (background image position relative to the element)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make a Raphael fill pattern move with the element? (background image position relative to the element)
    primarykey
    data
    text
    <p>How can I give a Raphael element a fill that moves as the element moves, like how the CSS <code>background-image</code> of a <code>position: absolute;</code> HTML element would keep the same position relative to its location as it moved?</p> <p>Here's an example demo: how can I make the background image pattern of the Raphael element (the triangular path) behave the same while dragged as the HTML element (the square div)?</p> <h2><a href="http://jsbin.com/oxuyeq/8/edit" rel="nofollow noreferrer">http://jsbin.com/oxuyeq/8/edit</a></h2> <hr> <p>This question is essentially the opposite of <strong><a href="https://stackoverflow.com/questions/9790911/how-to-make-a-pattern-fixed-in-raphael-js-ie">How to make a pattern “fixed” in Raphael.js / IE?</strong></a> with the polarised glasses simulator - I want to make the IE-specific behaviour they were trying to avoid happen consistently, in all browsers (including IE8).</p> <p>As detailed in that other question, in IE8 (VML) only, the Raphael element behaves how I want; but even this is erratic: various things like calling <code>setSize</code> on the <code>paper</code> element or re-defining the fill (essentially, anything forcing a redraw) cause it to switch to the other behaviour.</p> <hr> <p>There's a <a href="https://stackoverflow.com/questions/14407240/how-to-make-svg-image-pattern-fill-move-with-object">question similar to this for pure SVG</a>, but without any good answers at time of writing, and certainly none that work for Raphael.</p> <hr> <p><strong>Edit 2</strong>: Watching what happens in SVG mode, it seems that every Raphael transform also automatically does the same matrix transform to the svg <code>&lt;pattern&gt;</code> element. I think this is what causing the behaviour I'm trying to avoid - I think <code>patternContentUnits</code> and <code>patternUnits</code> are unrelated. There's an unresolved issue that seems related here (highlighting the same problem with clip-rect, next to the line <code>this.pattern &amp;&amp; updatePosition(this);</code>) - <a href="https://github.com/DmitryBaranovskiy/raphael/issues/638" rel="nofollow noreferrer">https://github.com/DmitryBaranovskiy/raphael/issues/638</a></p> <p>So one possibility might be <a href="https://stackoverflow.com/questions/6627105/raphael-js-custom-attributes/9418963#9418963">to define a custom attribute</a> that applies a transform to the element without also applying it to the pattern. Sounds difficult - might require hacking Raphael or duplicating lots of Raphael transform code. Hopefully there's some other way. And <a href="https://stackoverflow.com/questions/17471380/how-to-debug-or-see-vml-ouput-in-ie-e-g-from-raphael">god help us making this work in VML</a>...</p> <hr> <p><strong>Edit 3:</strong> Some potentially relevant information, it's not just path fills that have this problem. Raphael <code>image</code> elements created with <code>paper.image()</code> don't have this problem in SVG mode but have a very similar problem that is really bad in IE8 VML mode. <strong><a href="http://jsbin.com/ojutoy/8/edit" rel="nofollow noreferrer">Here's a demo</a></strong> of several ways to make image elements move, and here's a side-by-side comparison showing how they all work flawlessly in non-IE and all fail in IE:</p> <p><img src="https://i.stack.imgur.com/vSTZR.png" alt="enter image description here"></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USuser568458
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to make a Raphael fill pattern move with the element? (background image position relative to the element)
      1. USuser568458
      1. VTBountyStart
    2. VO
      singulars
      1. POHow to make a Raphael fill pattern move with the element? (background image position relative to the element)
      1. USsmartcaveman
      1. VTFavorite
    3. VO
      singulars
      1. POHow to make a Raphael fill pattern move with the element? (background image position relative to the element)
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload