Safari 7.0 & 8.0 & Chrome 40.X, Will Not Display SVGs With Fills Using , When A Negative Scale Is Set.
Research suggests that this maybe due to a recent Chrome Issue: http://ift.tt/1JBRPjd
After a couple hours of research I am not able to find any known issues for Safari 8.0 or 7.0. Please note this issue is fixed in Safari 8.1.2.
Does anyone know how to make the image properly display in the background of this SVG for Chrome 40.X & Safari 7.0 & 8.0? I have confirmed that removing the negative scale does fix this issue, but I'd greatly prefer to not have to remove the scale. Any other ideas?
Here is the code for the SVG:
<svg style="stroke-width: 20px; stroke-dasharray: 50, 50; stroke-opacity: 1; stroke: rgb(172, 245, 82); transition: stroke 500ms ease 500ms; stroke-linecap: round; stroke-linejoin: round;" fill="url(#a_fabricPattern)" class="svg-container svgStroke" version="1.1" id="a_svgContainer" xmlns="http://ift.tt/nvqhV5" xmlns:xlink="http://ift.tt/PGV9lw" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1000 1020" xml:space="preserve">
<defs>
<pattern patternUnits="userSpaceOnUse" id="a_fabricPattern" width="5730" height="4650" x="0" y="0">
<image x="0" y="0" id="fabricBgID" width="5730" height="4650" xlink:href="http://ift.tt/1JBRMUy"></image>
</pattern>
</defs>
<g id="svgGtag">
<g transform="translate(0,1020) scale(0.130000,-0.130000)">
<path d="M1222 6277 l-262 -262 0 -2240 0 -2240 218 -218 217 -217 1171 0
1171 0 246 254 247 254 0 2210 0 2210 -257 256 -258 256 -1115 0 -1115 0 -263
-263z m1948 -2477 l0 -1760 -575 0 -575 0 0 1760 0 1760 575 0 575 0 0 -1760z"></path>
<path d="M5104 6407 c-77 -73 -205 -193 -285 -267 -79 -74 -197 -184 -262
-246 l-117 -111 2 -334 3 -334 188 -5 187 -5 3 -1522 c2 -1261 0 -1524 -11
-1528 -8 -3 -102 -5 -209 -5 l-195 0 6 -31 c3 -17 6 -231 6 -475 l0 -444 945
0 945 0 0 475 0 475 -197 2 -198 3 -3 2243 -2 2242 -333 0 -332 -1 -141 -132z"></path>
</g>
</g>
</svg>
Aucun commentaire:
Enregistrer un commentaire