Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I came across the same issue. Apparently iOS uses a different coordinate system from desktops, and that leads to images being rendered upside down. Safari corrects this for most types of images, but not CSS fills.</p> <p>My solution was to apply a scale(1,-1) transform to the pattern definition element that Raphael made. Note that I'm using Raphael 1.5.2 for this; however, I didn't see any relevant changes in 2.0 when I looked.</p> <pre><code>if (isIOS()) { //iOS SVG fills use an upside-down coordinate system var patternID = RaphaelElement[0].style.fill.replace('#', '') var pattern = document.getElementById(patternID); pattern.setAttribute("patternTransform", "scale(1, -1)"); } </code></pre> <p>Explanation:</p> <p>Basically, you have 2 important HTML/SVG DOM elements:</p> <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="290" height="290"&gt; &lt;desc&gt;Created with Raphaël&lt;/desc&gt; &lt;defs&gt; &lt;pattern id="r-11258319" patternTransform="scale(1, -1)"&gt; &lt;image /&gt; &lt;/pattern&gt; &lt;/defs&gt; &lt;path fill="url(#r-11258319)" style="fill: url(&amp;quot;#r-11258319&amp;quot;) rgb(0, 0, 0);" /&gt; &lt;/svg&gt; </code></pre> <p><em>(Unimportant SVG stuff removed)</em></p> <p>The <code>path</code> element is the element you have a Raphael reference to, and the <code>pattern</code> element is the element you need to change. You need to add the <code>patternTransform="scale(1, -1)"</code> attribute to the <code>pattern</code> element. The two elements are only linked by the pattern's id, so I had to do a bit of hackery to extract this with <code>.style.fill.replace('#', '')</code>.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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