Odd horizontal line in SVG - svg
I'm making a polygon clipper demo program and found a problem, that cannot solve.
All other browsers shows the example svg as expected, but newest Opera 12.11 (in Windows 7 and Mac OS X 10.6) shows some odd horizontal line.
Opera 12.11 result:
Other browser's (IE9, Firefox, Safari, Chrome) result:
I expect this is a bug in Opera because all other browsers shows the right result, but not sure, because when I eg. remove some Z in path command, also Opera shows the right result.
What could be wrong in my SVG or is it a bug in Opera?
Problematic path:
<path style="fill:#80ff9C; fill-opacity:0.5; stroke:#003300; stroke-opacity:1.00; stroke-width:0.80;" id="p3" d="M167.12,227.93L164.78,225.58L164.78,201.75L163.53,203L142.92,203L140.9,200.97L138.87,203L118.45,203L116.11,200.65L116.11,200.43L114.14,201.09L113.87,201.16L106.39,202.53L106.15,202.56L96.48,203.17L96.22,203.17L88.33,202.67L88.05,202.63L81.88,201.36L81.55,201.26L76.74,199.37L76.36,199.18L72.51,196.63L72.16,196.34L69.06,193.09L68.8,192.73L66.34,188.65L66.17,188.3L64.3,183.01L64.21,182.69L62.96,175.77L62.94,175.53L62.45,166.59L62.44,166.32L62.83,161.46L56.41,160.67L56.12,160.6L52.27,159.53L52.27,187.6L49.92,189.95L26.52,189.95L24.18,187.6L24.18,83.41L26.52,81.07L49.92,81.07L52.26,83.4L52.26,83.68L52.45,83.58L52.75,83.46L58.61,81.53L58.96,81.45L64.69,80.67L65.08,80.65L72.44,81.09L72.72,81.13L79.06,82.42L79.39,82.52L83.26,84.05L83.69,84.29L87.35,86.93L87.68,87.22L91.13,91.09L91.33,91.38L94.37,96.28L94.54,96.62L96.5,101.85L96.59,102.16L96.73,102.82L97.48,100.58L97.61,100.27L100.23,95.33L100.44,95.02L103.76,90.87L104.02,90.6L107.95,87.24L108.26,87.02L113.01,84.32L113.34,84.16L118.9,82.22L119.21,82.14L125.69,80.98L125.93,80.96L131.95,80.65L132.32,80.65L140.3,81.11L140.56,81.14L147.02,82.4L147.33,82.49L152.58,84.42L152.92,84.58L157.36,87.23L157.67,87.46L161.42,90.82L161.69,91.13L164.68,95.19L164.88,95.54L167.12,100.34L167.24,100.65L168.03,103.46L168.03,54.67L170.37,52.33L193.56,52.33L195.91,54.67L195.91,81.07L217.13,81.07L219.12,82.36L235.15,118.59L249.15,82.45L251.21,81.06L267.29,81.15L269.65,84.63L267.35,90.56L268.9,88.56L269.17,88.27L272.65,85.24L273.05,84.97L276.65,83.1L277.08,82.93L282.96,81.43L283.26,81.38L290.26,80.67L290.56,80.66L295.53,80.9L295.87,80.96L301.02,82.12L301.34,82.22L305.26,83.84L305.26,83.4L307.6,81.06L331,81.06L333.35,83.41L333.32,106.07L335.16,100.58L335.29,100.27L337.92,95.33L338.12,95.03L341.43,90.88L341.71,90.6L345.65,87.24L345.95,87.03L350.69,84.32L351.02,84.17L356.58,82.22L356.89,82.14L363.36,80.98L363.61,80.96L369.63,80.65L370.01,80.65L377.98,81.11L378.24,81.14L384.71,82.4L385.02,82.49L390.27,84.42L390.6,84.57L395.04,87.22L395.37,87.45L399.12,90.83L399.38,91.13L402.37,95.19L402.57,95.54L404.81,100.34L404.93,100.65L405.38,102.26L405.38,83.41L407.72,81.07L431.34,81.07L433.68,83.4L433.68,83.92L438.94,82.01L439.27,81.92L445.06,80.88L445.37,80.85L452.26,80.69L452.57,80.71L458.4,81.45L458.76,81.53L463.42,83.03L463.82,83.22L467.58,85.44L467.99,85.75L471.27,89.06L471.55,89.41L473.86,93.1L474.07,93.55L475.38,97.53L475.47,97.96L475.81,101.25L475.82,101.45L475.82,158.65L473.47,161L455.03,161L452.69,158.66L452.58,103.42L452.18,102.16L451.48,101.27L450.13,100.42L447.35,99.61L443.1,99.28L439.59,100.03L437.44,101.06L435.97,102.39L433.88,105.3L433.69,105.76L433.69,133.06L435.2,133.06L437.55,135.41L437.42,204.06L437.38,204.48L436.39,209.01L436.24,209.46L434.39,213.27L434.11,213.69L431.39,216.92L431.05,217.24L427.42,219.9L427.06,220.11L422.33,222.23L422,222.34L416.02,223.84L415.74,223.89L408.17,224.68L407.94,224.69L398.86,224.52L398.63,224.51L390.95,223.53L390.68,223.47L382.84,221.31L382.48,221.17L379.33,219.61L378.17,217.99L376.45,204.99L380.33,202.19L387.08,205.47L392.85,207.48L398.67,208.52L401.88,208.75L406.92,208.37L409.73,207.59L411.2,206.7L411.81,205.95L412.16,204.84L412.18,202L406.35,203.16L406.04,203.21L399.45,203.51L399.12,203.49L392.54,202.71L392.22,202.64L386.95,201.09L386.52,200.91L383.24,199.05L382.81,198.73L379.7,195.66L379.42,195.32L376.61,190.96L376.43,190.64L375.24,187.75L375.24,200.65L372.89,203L356.55,203L354.21,200.66L354.13,159.59L351.66,158.84L351.33,158.71L346.46,156.26L346.13,156.06L342.02,152.9L341.73,152.62L341.2,152.01L339.97,153.37L339.06,154.95L338.95,200.66L336.61,203L315.82,203L314.06,201.23L312.29,203L291.67,203L289.33,200.65L289.33,187.37L287.34,191.69L287.16,192.02L284.34,196.01L284.05,196.34L280.91,199.18L280.46,199.49L276.95,201.25L276.58,201.38L271.17,202.84L270.84,202.9L264.39,203.53L264.05,203.54L257.14,203.02L256.83,202.97L252.4,201.93L252.4,225.58L250.05,227.93L229.43,227.93L227.09,225.58L227.09,187.22L225.03,191.69L224.85,192.01L222.04,196.01L221.73,196.34L218.59,199.17L218.15,199.48L214.66,201.24L214.28,201.38L208.87,202.84L208.54,202.9L202.08,203.53L201.74,203.54L194.84,203.02L194.54,202.98L190.09,201.94L190.09,225.58L187.74,227.93Z
M197.78,187.5L200.78,187.08L202.89,186.23L204.29,185.11L205.42,183.44L205.87,182.24L205.56,182.06L199.49,170.19L201.9,166.35L208.29,166.49L207.83,159.77L206.88,155.37L205.71,152.86L204.43,151.38L202.73,150.31L200.12,149.55L196.5,149.28L195.91,149.42L195.91,158.65L193.56,161L190.1,161L190.13,185.7L191.31,186.36L194.26,187.2Z
M260.09,187.5L263.09,187.08L265.2,186.23L266.6,185.11L267.74,183.43L268.52,181.3L266.75,180.35L265.65,178.75L263.75,164.25L267.66,161.46L270.35,162.79L270.15,159.77L269.19,155.37L268.59,154.07L266.01,150.91L265.05,150.31L262.43,149.55L258.81,149.28L255.92,149.95L253.38,151.25L252.39,152.03L252.44,185.7L253.62,186.36L256.57,187.2Z
M405.83,187.49L409.74,186.84L412.25,185.76L412.25,161L407.72,161L405.38,158.65L405.38,149.33L404.68,149.3L401.46,149.83L399.56,150.66L396.77,153.62L396.57,153.79L396.4,154.04L395.29,157.12L394.34,162.91L394.05,170.1L394.62,176.48L395.76,181.05L397.11,184.03L398.39,185.5L400.11,186.58L402.55,187.31Z
M98.91,186.95L104.73,186.33L110.5,184.76L114.04,183.1L115.91,181.35L116.11,181.45L116.11,159.49L113.97,158.84L113.64,158.71L108.76,156.26L108.45,156.06L104.34,152.9L104.05,152.62L101.14,149.24L98.46,149.07L95.15,149.49L92.97,150.33L91.58,151.43L90.57,152.94L89.18,156.73L88.31,161.67L88.16,168.46L88.8,175.96L90,181.31L91.09,183.87L92.25,185.3L93.69,186.24L95.82,186.86Z
M61.37,144.33L65.04,143.91L67.63,143L69.49,141.72L70.86,140.06L72.38,136.66L73.77,131.21L74.63,123.89L74.66,116.82L73.94,109.89L72.81,105.46L71.51,102.88L69.94,101.12L68.08,99.95L65.08,99.01L60.82,98.6L57.91,99.06L55,100.23L52.28,102.1L52.37,141.97L53.93,142.85L56.98,143.81Z
M373.19,143.31L373.75,143.23L375.49,142.45L376.68,141.36L377.59,139.78L378.8,135.24L379.65,127.98L379.81,118.04L379.15,109.78L377.96,104.02L377,101.64L375.9,100.29L374.44,99.36L372.16,98.74L369.06,98.65L366.18,99.21L364.22,100.16L362.96,101.34L361.94,103.15L360.64,107.73L359.76,114.54L359.55,120.81L360.41,133.12L360.51,133.62L361.39,133.78L361.8,133.9L365.83,135.57L366.28,135.83L369.42,138.21L369.77,138.56L372.52,141.97L372.78,142.4Z
M289.33,142.66L289.33,135.4L291.67,133.06L293.32,133.06L292.17,132.18L291.75,131.74L289.59,128.68L289.32,128.12L288.23,124.69L288.14,124.09L288.12,120.36L288.2,119.79L289.21,116.36L289.46,115.81L291.52,112.69L291.94,112.24L294.62,110.06L295.19,109.73L298.41,108.54L298.91,108.42L301.8,108.14L302,108.13L302.24,108.13L302.49,108.14L305.26,108.51L305.26,102.2L301.81,100.1L298.17,98.83L296.56,98.6L292.77,99.04L289.99,100L288.01,101.33L286.35,103.26L284.95,106.06L283.76,110.68L282.92,118.05L282.88,124.86L283.64,131.68L284.96,136.7L286.48,139.95L287.9,141.66Z
M252.13,135.13L252.21,135.09L252.5,134.97L257.7,133.34L258.08,133.26L259.63,133.09L259.35,131.43L259.32,131.21L258.81,121.7L258.81,121.48L259.34,112.27L259.37,112.05L259.65,110.44L250.64,133.68Z
M212.81,134.34L195.91,96.07L195.91,133.24L200.92,132.68L201.29,132.68L208.07,133.23L208.38,133.28Z
M141.22,134.33L141.74,129.97L141.22,129.23Z
M141.22,115.01L141.81,114.13L141.47,109.79L140.27,104.02L139.32,101.64L138.22,100.29L136.75,99.36L134.47,98.74L131.37,98.65L128.49,99.21L126.53,100.16L125.25,101.36L124.25,103.14L122.97,107.7L122.89,108.31L138.87,108.31L141.22,110.65Z" fill-rule="nonzero">
</path>
EDIT: When I change "stroke-width" from "0.80" to "0.81" Opera shows the right result, but "0.85" shows the odd horizontal line in other place. Really weird!
Related
SVG clipPath issue on Firefox (88.0.1)
I have an SVG image inside an SVG g element that has a clipPath applied to to it. Though the clipPath renders correctly and as expected on Chrome and Safari only part of the image seems to appear on Firefox (I'm on Firefox version 88.0.1 - OSX) Here is a link to a jsfiddle that recreates the problem On Chrome it renders properly On Firefox only part of the star renders The other strange thing is that if I duplicate the path within the clipPath of the image seems to work in Firefox (jsfiddle example here) - which makes no sense to me. <clipPath clipPathUnits="objectBoundingBox" id="clipPathMask-0f05a0aa-4fb7-420f-aea5-ad7fc9c9a127" transform="scale(0.005784982935153583 0.0038563296140941045)"> <path d="M20.9,95.6l5.6-32.8L2.7,39.6l32.9-4.8L50.3,5L65,34.8l32.9,4.8L74.1,62.8l5.6,32.8L50.3,80.1L20.9,95.6z"></path> <path d="M20.9,95.6l5.6-32.8L2.7,39.6l32.9-4.8L50.3,5L65,34.8l32.9,4.8L74.1,62.8l5.6,32.8L50.3,80.1L20.9,95.6z"></path> </clipPath> Has anyone come across this before and knows whats happening here?
Firefox could not display SVG img properly
In desktop version of Firefox (version 56.0), the SVG image was displayed incorrectly. For example, with the following SVG image for twitter logo, it shows something that not even close to twitter logo. The same SVG image is displayed properly in other browsers, (IE11, Edge, Chrome, etc.). Is this a bug in Firefox? or there is a workaround to make it work? (two screenshots for working and not-working pages in attachment) <img style="width:640px; height:640px;" src="data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%2355ACEE%22%20d%3D%22M32%2C6.4c-1.2%2C0.5-2.4%2C0.9-3.8%2C1c1.4-0.8%2C2.4-2.1%2C2.9-3.6c-1.3%2C0.8-2.7%2C1.3-4.2%2C1.6c-1.2-1.3-2.9-2.1-4.8-2.1%2Cc-3.6%2C0-6.6%2C2.9-6.6%2C6.6c0%2C0.5%2C0.1%2C1%2C0.2%2C1.5C10.3%2C11.1%2C5.5%2C8.5%2C2.2%2C4.5c-0.6%2C1-0.9%2C2.1-0.9%2C3.3c0%2C2.3%2C1.2%2C4.3%2C2.9%2C5.5%2Cc-1.1%2C0-2.1-0.3-3-0.8c0%2C0%2C0%2C0.1%2C0%2C0.1c0%2C3.2%2C2.3%2C5.8%2C5.3%2C6.4c-0.6%2C0.1-1.1%2C0.2-1.7%2C0.2c-0.4%2C0-0.8%2C0-1.2-0.1%2Cc0.8%2C2.6%2C3.3%2C4.5%2C6.1%2C4.6c-2.2%2C1.8-5.1%2C2.8-8.2%2C2.8c-0.5%2C0-1.1%2C0-1.6-0.1c2.9%2C1.9%2C6.4%2C2.9%2C10.1%2C2.9c12.1%2C0%2C18.7-10%2C18.7-18.7%2Cc0-0.3%2C0-0.6%2C0-0.8C30%2C8.9%2C31.1%2C7.7%2C32%2C6.4z%22%2F%3E%3C%2Fsvg%3E" /> Working SVG in Chrome Not-working SVG in Firefox
Your path is invalid. Commas are only allowed between numbers so -2.1,c is invalid and a UA should stop parsing there. Firefox is correct and the other UAs are not per the SVG specification. If you decoded the data URL to a file and viewed the file directly you'd have seen the error logged in the Firefox console. Removing the invalid commas fixes things. If this SVG was produced by a tool you should get the tool fixed. <img style="width:640px; height:640px;" src="data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%2355ACEE%22%20d%3D%22M32%2C6.4c-1.2%2C0.5-2.4%2C0.9-3.8%2C1c1.4-0.8%2C2.4-2.1%2C2.9-3.6c-1.3%2C0.8-2.7%2C1.3-4.2%2C1.6c-1.2-1.3-2.9-2.1-4.8-2.1c-3.6%2C0-6.6%2C2.9-6.6%2C6.6c0%2C0.5%2C0.1%2C1%2C0.2%2C1.5C10.3%2C11.1%2C5.5%2C8.5%2C2.2%2C4.5c-0.6%2C1-0.9%2C2.1-0.9%2C3.3c0%2C2.3%2C1.2%2C4.3%2C2.9%2C5.5c-1.1%2C0-2.1-0.3-3-0.8c0%2C0%2C0%2C0.1%2C0%2C0.1c0%2C3.2%2C2.3%2C5.8%2C5.3%2C6.4c-0.6%2C0.1-1.1%2C0.2-1.7%2C0.2c-0.4%2C0-0.8%2C0-1.2-0.1c0.8%2C2.6%2C3.3%2C4.5%2C6.1%2C4.6c-2.2%2C1.8-5.1%2C2.8-8.2%2C2.8c-0.5%2C0-1.1%2C0-1.6-0.1c2.9%2C1.9%2C6.4%2C2.9%2C10.1%2C2.9c12.1%2C0%2C18.7-10%2C18.7-18.7c0-0.3%2C0-0.6%2C0-0.8C30%2C8.9%2C31.1%2C7.7%2C32%2C6.4z%22%2F%3E%3C%2Fsvg%3E">
Arrows in SVG aren't rotated when rendered by browsers
I created an SVG file, and in inkscape it looks like this: But when I render it by a browser, the arrows get screwed up: This (above) is the actual svg (link), and in case it renders correctly in your browser, here is how I see it (this time it's a screenshot in png): It's the same in the latest Firefox and Chrome. This file was created in inkscape 0.48 on Windows, and when I re-open it in inkscape, it renders correctly. Is there a way to make the browser rotate the arrows?
There are bug reports of this for Chrome, Firefox, Inkscape, and Wikimedia. It turns out that some renderers get the arrow direction wrong when just one handle, the one at the beginning of the curve, has zero length. Currently, Firefox, Inkscape, and LibreOffice Write get it right, while Chrome gets it wrong. To create an example of such a line, draw a line in Inkscape, then add a curved midpoint. Inkscape then makes both segments Bezier curves, but the end segments have zero length handles. If you then delete the midpoint, Inkscape will try to match the curve, and will create non-zero length handles for the endpoints. Reported as bug in Firefox in 2015, and fixed Reported as bug in Chrome in 2015, and not fixed Reported as bug in Inkscape in 2006, blamed on user and closed as "out of date" in 2009 Reported as bug in Wikimedia in 2015, by me Discussion of ambiguity in SVG spec
A fix that I have noticed in Inkscape is to first select the "edit paths by nodes" option, and select each endpoint and select the option to "make the selected nodes smooth" from the path editing toolbar.
I found the solution: The problem was that for these lines Bezier curves were used, and even though the lines were straight, it caused the problem. Once I replaced the curves with "diagram connectors", the problem disappeared.
You're using degenerate bezier curves which display as straight lines. Neither Chrome nor Firefox prior to version 38 cope with these when determining marker angles. This has been fixed in Firefox 38 by bug 1129854. I think there's an equivalent Chrome bug too.
Multiline editable textarea in SVG
I'm trying to implement multiline editable textfield in SVG. I have the following code in http://jsfiddle.net/ca4d3/ : <svg width="1000" height="1000" overflow="scroll"> <g transform="rotate(5)"> <rect width="300" height="400" fill="#22DD22" fill-opacity="0.5"/> </g> <foreignObject x="10" y="10" overflow="visible" width="10000" height="10000" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"> <p style="display:table-cell;padding:10px;border:1px solid red; background-color:white;opacity:0.5;font-family:Verdana; font-size:20px;white-space: pre; word-wrap: normal; overflow: visible; overflow-y: visible; overflow-x:visible;" contentEditable="true" xmlns="http://www.w3.org/1999/xhtml"> Write here some text. Be smart and select some word. If you wanna be really COOL, paste here something cool! </p> </foreignObject> </svg> In newest Chrome, Safari and Firefox the code works in some way, but in Opera and IE 9 not. The goal is that: 0) Works in newest Chrome, Safari, Firefox, Opera and IE and if ever possible in some pads. 1) White-spaces are preserved and text wraps only on newline char (works in Chrome, Safari and Firefox, but not in Opera and IE 9 *). 2) The textfield is editable (in the same reliable and stabile way as textareas and contenteditable p elements in html) and height and width is expanded to fit text (works in Chrome, Safari and Firefox, but not in Opera and IE 9 *). 3) Texfield can be transformed (rotated, skewed, translated) while maintaining text editability (Tested rotation, but not work in any browser *). EDIT: Foreignobject rotation works on Firefox 15.0.1, but not in Safari 5.1.7 (6534.57.2), Chrome 22.0.1229.79, Opera 12.02, IE 9. Tested on Mac OS X 10.6.8. 4) Textfield can be clipped and masked while not necessarily maintaining text editability (not yet tested). *) using above code These all can be achieved using Flash, but Flash has so severe problems that it is not suitable for my purposes (after every little change in code, all have to be compiled again using Flex, which is slow, font size has limits, tracking technique is pixeloriented, not relative to em size etc.) and there still are differences across platforms. And I want to give a try to SVG! GUESTION: Can I achieve my goals 0-4 with current SVG support in browsers? Is coming SVG 2.0 for some help in this case? EDIT: Changed display:table to display:table-cell (and added new jsfiddle), because display:table made the field to loses focus when pressed arrow-up on first text row.
It seems that when coder says "browser", one of the next two words is "workaround". So one possible workaround is to use contenteditable p, place it on top of svg and make transformations to this. If some svg element have to be on top of contenteditable p, then we must add one svg more on top. This combination can be rendered via phantomjs to png/pdf. If we want svg masks, clips or filters, they are not supported in any browser on html-elements. So to make them work, we must convert text on contendeditable p to paths (using font data from server or get pathdata clientside using this when it is more complete) and mask or clip these. Not very easy workaround, but SVG support for editable textareas is very poor. Editable textarea is not implemented nearly in any browser for now although the spec here and here is rather old. Opera 12.02 has some sort of support, but buggy: try here to move cursor using up and down arrow keys.
SVG 'maskContentUnits' not rendering properly in mobile safari
I have an SVG I am building with Javascript. I load in a large SVG file, break it apart into pieces all drawn with paths, and place each element in my page. I'm only using these SVGs as masks for other images I am loading. Basically my structure is like the following. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="26.750152587890625 10.117172241210938 197.24969482421875 348.1596221923828" width="197.25" height="348.16015625"> <mask id="designMask" maskContentUnits="objectBoundingBox"> <g id="CutContour1bg"> <path d="[my path coords]" style="fill:#FFFFFF;"> </g> </mask> <image href="http://myImage.jpg" style="mask: url(#designMask);" width="800px" height="800px" x="26.75" y="10.1171875"> </svg> This renders the image being masked by my SVG perfect, in FF, IE9, Chrome, Safari 5.1 (desktop). In mobile safari however, the image does not render properly. I trace out coords of the mask, they are all correct. In FF I can see the SVG load (all black) then disappear as it becomes the mask. (I am waiting until the design is loaded, then wrap my <g> with <mask> since FF has an issue looking for the mask before the content is loaded. This tells me the mask's position is exactly where it needs to be, but the maskContentUnits are not. They remain in the top left corner instead of the object's bounding box, like I'm telling it. I can barely see part of the image in the mask, so the mask units are correct, but I cannot get the maskContentUnits to work or be read in mobile safari. Has anyone ever seen this issue, or any idea how to correct it? I hate having this work everywhere except mobile safari, as it is meant to mostly work on mobile... which defeats its not purpose haha. Thanks!
I haven't found a way to make maskContentUnits work properly in mobile safari yet, I'm pretty sure it's just not recognized yet like other browsers. But I figured out a 'hack' to make the example work. The issue is, the mask area resides in the top left corner of the browser, rather than of the svg object being used as the mask. So if you have an svg in the middle of your page, the image being masked will not follow the same positioning. The way I found for it to work, is, I wrapped the svg inside a div with the same width as the svg, and modify the position of the div instead of the svg. This way the mask is technically still in the 'top left' corner, but of the div rather than the offset position of the svg. If anyone finds a better way, to make maskContentUnits render proper in mobile safari, I'd like to hear it!