Related
I've a strange effect with SVGs and have no idea how to handle it.
The SVGs are rendered on Shopify product pages based on metafield values. E.g. when a product has a TRUE in the metafield for vegan, then the SVG for vegan is displayed. I've about 10 metafields for breathable, high-density, repellent, windbreaker etc.
Shopify's metafields are kind of hidden properties and their values can be accessed through Shopify Liquid templating language. On a product page I check e.g. if metafields.product-icons.vegan is TRUE. If yes, the SVG is rendered (the icons in the bottom right).
The product page above is an example which produces a correct result. Every icon is displayed fully.
My problem is that on some product pages the icons are rendered correctly and on some parts of the SVGs are missing. On the image below. look at the right vegan icon, where the top part is missing:
In this example other parts of the high-density icon in the middle are missing than in the one above, whereas on the first image the icon is complete.
I checked different machines and networks to see if it's a caching issue. But it isn't.
Every product uses the same template, hence the same liquid code and SVGs.
Any idea what I check further?
Here an example for an SVG which was rendered properly and and with missing parts on two different pages
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 76.5 76.5" xml:space="preserve">
<style type="text/css">
.st0{display:none;}
.st1{fill:none;stroke:#000000;stroke-width:2;}
.st2{fill:#FFFFFF;}
.st3{fill:none;stroke:#FFFFFF;stroke-width:5;}
.st4{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.st5{display:inline;}
.st6{font-family:'Akkurat-Bold';}
.st7{font-size:7.0024px;}
.st8{display:inline;fill:#2B3427;}
.st9{fill:none;stroke:#2B3427;stroke-width:2;}
.st10{fill:none;stroke:#2B3427;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.st11{display:inline;fill:#FFFFFF;}
.st12{fill:#2B3427;}
</style>
<g id="Vorlagen" class="st0">
</g>
<g id="Kreis_Black">
<path d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
<path d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
</g>
<g id="Illu">
<g>
<path class="st1" d="M35.2,43.3c-1.5,1-9.1,3.6-14.7-1.1c-4-3.3-4.4-8.7-3.6-24.9c9.5-0.9,17.4,0.9,22,5c4.1,3.6,3.9,8.6,4.3,11.2
C43.6,36.5,39.5,40.4,35.2,43.3z"/>
<path class="st2" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st3" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st2" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st1" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st4" d="M22.7,22.6c0,0,14.8,6,11.3,43.2c0,0,12.4-31.6,24-36.1"/>
</g>
<rect x="21.1" y="47.3" class="st2" width="32.6" height="8.1"/>
</g>
<g id="Typo" class="st0">
<text transform="matrix(1 0 0 1 25.4238 53.8332)" class="st5 st6 st7">VEGAN</text>
</g>
<g id="Typo_Gepfadet">
<g>
<path d="M28.1,53.8h-1l-1.6-5h1l1.2,3.8l1.2-3.8h0.9L28.1,53.8z"/>
<path d="M30.8,53.8v-5h3.5v0.8h-2.6v1.2H34v0.8h-2.3V53h2.6v0.8H30.8z"/>
<path d="M38.9,53.8l-0.1-0.5c-0.1,0.3-0.6,0.6-1.2,0.6c-0.6,0-1.1-0.1-1.5-0.6c-0.5-0.5-0.6-1.2-0.6-2s0.1-1.5,0.6-2
c0.4-0.4,0.9-0.6,1.5-0.6c0.6,0,1.1,0.2,1.5,0.6c0.2,0.3,0.4,0.6,0.5,1h-0.9c0-0.2-0.1-0.3-0.2-0.5c-0.2-0.2-0.4-0.3-0.8-0.3
c-0.3,0-0.6,0.1-0.8,0.3c-0.3,0.4-0.4,1-0.4,1.4s0,1.1,0.4,1.5c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.7-0.3
c0.3-0.3,0.3-0.6,0.3-1h-1.2v-0.8h2.1v2.7H38.9z"/>
<path d="M44,53.8l-0.3-1h-2l-0.3,1h-0.9l1.7-5h1l1.7,5H44z M42.7,50L42,52.1h1.4L42.7,50z"/>
<path d="M49.1,53.8l-2.2-3.4v3.4H46v-5h1l2.1,3.4v-3.4H50v5H49.1z"/>
</g>
</g>
<g id="Ikons_x5F_Grün" class="st0">
<path class="st8" d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
<path class="st8" d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
<g class="st5">
<path class="st9" d="M35.2,43.3c-1.5,1-9.1,3.6-14.7-1.1c-4-3.3-4.4-8.7-3.6-24.9c9.5-0.9,17.4,0.9,22,5c4.1,3.6,3.9,8.6,4.3,11.2
C43.6,36.5,39.5,40.4,35.2,43.3z"/>
<path class="st2" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st3" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st2" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st9" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st10" d="M22.7,22.6c0,0,14.8,6,11.3,43.2c0,0,12.4-31.6,24-36.1"/>
</g>
<rect x="21.1" y="47.3" class="st11" width="32.6" height="8.1"/>
<g class="st5">
<path class="st12" d="M28.1,53.8h-1l-1.6-5h1l1.2,3.8l1.2-3.8h0.9L28.1,53.8z"/>
<path class="st12" d="M30.8,53.8v-5h3.5v0.8h-2.6v1.2H34v0.8h-2.3V53h2.6v0.8H30.8z"/>
<path class="st12" d="M38.9,53.8l-0.1-0.5c-0.1,0.3-0.6,0.6-1.2,0.6c-0.6,0-1.1-0.1-1.5-0.6c-0.5-0.5-0.6-1.2-0.6-2s0.1-1.5,0.6-2
c0.4-0.4,0.9-0.6,1.5-0.6c0.6,0,1.1,0.2,1.5,0.6c0.2,0.3,0.4,0.6,0.5,1h-0.9c0-0.2-0.1-0.3-0.2-0.5c-0.2-0.2-0.4-0.3-0.8-0.3
c-0.3,0-0.6,0.1-0.8,0.3c-0.3,0.4-0.4,1-0.4,1.4s0,1.1,0.4,1.5c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.7-0.3
c0.3-0.3,0.3-0.6,0.3-1h-1.2v-0.8h2.1v2.7H38.9z"/>
<path class="st12" d="M44,53.8l-0.3-1h-2l-0.3,1h-0.9l1.7-5h1l1.7,5H44z M42.7,50L42,52.1h1.4L42.7,50z"/>
<path class="st12" d="M49.1,53.8l-2.2-3.4v3.4H46v-5h1l2.1,3.4v-3.4H50v5H49.1z"/>
</g>
</g>
</svg>
<svg width="29px" height="29px" viewBox="36 168 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="checkbox" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(38.000000, 169.000000)">
<ellipse id="checkbox-circle" stroke="#F2B91A" stroke-width="3" cx="12.5" cy="13.5" rx="12.5" ry="12.5"></ellipse>
<g id="checkbox-checked" transform="translate(4.000000, 0.000000)" fill="#FFFFFF">
<path d="M19.945968,0.293195745 C19.727568,0.141280851 19.486068,0.0470042553 19.229448,0.014387234 C18.587688,-0.0727404255 17.969868,0.241365957 17.620428,0.80747234 L8.299788,15.9252383 L3.003168,8.72089787 C2.693628,8.29866383 2.194248,8.04711064 1.668828,8.04711064 C1.293348,8.04711064 0.929628,8.17713191 0.645288,8.41394043 C0.291648,8.70749362 0.067368,9.13017447 0.012768,9.60468511 C-0.041832,10.0787489 0.079968,10.5465574 0.355908,10.9227702 L7.084308,20.0734085 C7.361088,20.4491745 7.758408,20.688217 8.163288,20.7387064 L8.229228,20.7494298 C8.297268,20.758366 8.364888,20.7619404 8.432088,20.7619404 C8.998248,20.7619404 9.522408,20.4607915 9.834048,19.9554511 L20.429808,2.76806809 C20.937168,1.94370638 20.720448,0.833834043 19.945968,0.293195745 M10.3519546,20.7619404 L0,20.7619404 L0,8.93617021e-05 L20.7039,8.93617021e-05 L20.7039,20.7619404 L10.3519546,20.7619404 L9.25523634e-06,20.7619404 L9.25523634e-06,4.17649403e-07 L20.7040592,4.17649403e-07 L20.7040592,20.7619404 L10.3519546,20.7619404 L10.3519546,20.7619404 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
Problem is that Safari renders a small border for the checkbox-checked g:
image link
Codepen: http://codepen.io/anon/pen/GjGmGE?editors=1000#0
Edit:
It was actually in the path. Other browsers just don't render it.
Proper path:
<g id="checkbox-checked" transform="translate(4.000000, 0.000000)" fill="#FFFFFF">
<path d="M19.945968,0.293195745 C19.727568,0.141280851 19.486068,0.0470042553 19.229448,0.014387234 C18.587688,-0.0727404255 17.969868,0.241365957 17.620428,0.80747234 L8.299788,15.9252383 L3.003168,8.72089787 C2.693628,8.29866383 2.194248,8.04711064 1.668828,8.04711064 C1.293348,8.04711064 0.929628,8.17713191 0.645288,8.41394043 C0.291648,8.70749362 0.067368,9.13017447 0.012768,9.60468511 C-0.041832,10.0787489 0.079968,10.5465574 0.355908,10.9227702 L7.084308,20.0734085 C7.361088,20.4491745 7.758408,20.688217 8.163288,20.7387064 L8.229228,20.7494298 C8.297268,20.758366 8.364888,20.7619404 8.432088,20.7619404 C8.998248,20.7619404 9.522408,20.4607915 9.834048,19.9554511 L20.429808,2.76806809 C20.937168,1.94370638 20.720448,0.833834043 19.945968,0.293195745" id="Combined-Shape"></path>
</g>
The lines you are complaining about are actually a part of your path. If we draw it with a stroke instead of a fill, you can see what I mean.
<svg viewBox="36 168 29 29">
<g id="checkbox" stroke="black" stroke-width="0.2" fill="none" fill-rule="evenodd" transform="translate(38.000000, 169.000000)">
<g id="checkbox-checked" transform="translate(4.000000, 0.000000)">
<path d="M19.945968,0.293195745 C19.727568,0.141280851 19.486068,0.0470042553 19.229448,0.014387234 C18.587688,-0.0727404255 17.969868,0.241365957 17.620428,0.80747234 L8.299788,15.9252383 L3.003168,8.72089787 C2.693628,8.29866383 2.194248,8.04711064 1.668828,8.04711064 C1.293348,8.04711064 0.929628,8.17713191 0.645288,8.41394043 C0.291648,8.70749362 0.067368,9.13017447 0.012768,9.60468511 C-0.041832,10.0787489 0.079968,10.5465574 0.355908,10.9227702 L7.084308,20.0734085 C7.361088,20.4491745 7.758408,20.688217 8.163288,20.7387064 L8.229228,20.7494298 C8.297268,20.758366 8.364888,20.7619404 8.432088,20.7619404 C8.998248,20.7619404 9.522408,20.4607915 9.834048,19.9554511 L20.429808,2.76806809 C20.937168,1.94370638 20.720448,0.833834043 19.945968,0.293195745 M10.3519546,20.7619404 L0,20.7619404 L0,8.93617021e-05 L20.7039,8.93617021e-05 L20.7039,20.7619404 L10.3519546,20.7619404 L9.25523634e-06,20.7619404 L9.25523634e-06,4.17649403e-07 L20.7040592,4.17649403e-07 L20.7040592,20.7619404 L10.3519546,20.7619404 L10.3519546,20.7619404 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
Load the file into your editor and delete the extra lines.
on the kitchensink demo (link), i'm trying to load this svg (grouped):
<?xml version="1.0" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g id="DEFAULT" display="visible">
<path d="M291.94 240.98L292.64 240.79M292.64 240.79L293.16 240.27M293.16 240.27L293.35 239.57"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M293.35 208.24L293.16 207.54M293.16 207.54L292.64 207.02M292.64 207.02L291.94 206.84"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M293.35 208.24L293.35 239.57"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M231.12 223.91L231.12 223.91"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M231.12 223.91L231.12 239.57"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M231.12 223.91L231.12 208.24"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M232.52 206.84L231.82 207.02M231.82 207.02L231.31 207.54M231.31 207.54L231.12 208.24"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M231.12 239.57L231.31 240.27M231.31 240.27L231.82 240.79M231.82 240.79L232.52 240.98"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M232.52 206.84L291.94 206.84"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M232.52 240.98L291.94 240.98"
fill="none" stroke="black" stroke-width="0.5"/>
</g>
</svg>
results is :
as you can see, i have strange selected area... how i can fix the svg in order to obtain correct control area on selecting object?
thanks in advance
You would need to add these attributes to your SVG so that it's just looking at a portion of the SVG at its current coordinates.
<svg ... viewBox="231.12 206.84 62.23 34.14">
(I "cheated" to get these values by opening the SVG in Illustrator, changing the artboard to extend only to the edges of the paths, then saving the file again to see what viewBox values it would give me (though of course if you can wrap your head around how the "d" attribute works, which I still can't fully do :), you can presumably just get them with just some arithmetic).)
I have an SVG vector object that consists of a few paths, some of which need to be masked.
For this I've made 5 SVG masks. All of them seem to be working (i.e. masking their respective object), except for one! I'm probably missing something obvious, but I'm not seeing it.
In short: how do I get the visible element within the circle to be properly masked? Any pointers would be hugely appreciated.
The object is up at this pen: http://codepen.io/anon/pen/LNYOya
SVG code:
<svg version="1.1" id="het-lekkerste-van" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="504.789px" height="186.027px" viewBox="0 0 504.789 186.027" enable-background="new 0 0 504.789 186.027"
xml:space="preserve">
<defs>
<g id="l-masks">
<mask id="mask-l-3">
<path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M59.644,94.138
c0,0,70.4-35.679,57.122-49.875"/>
</mask>
<mask id="mask-l-2-2">
<path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M117.631,45.638
c0,0-12.5-12.875-25,29.75"/>
</mask>
<mask id="mask-l-2-1">
<path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M92.144,74.763c0,0-16.375,62-41.75,59.5"/>
</mask>
<mask id="mask-l-1-2">
<path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M53.644,134.263
c0,0-8.5,0.25-8-7.5c0,0,0.5-10.875,27.25-7.75"/>
</mask>
<mask id="mask-l-1-1">
<path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M73.519,118.638
c0,0,19.25,4.25,20.375,5.125c0,0,13.875,2.625,17,0.75c0,0,16.875-3.625,28.125-20.25"/>
</mask>
</g>
<mask id="mask-cirkel">
<path fill="none" stroke="#ffffff" stroke-width="9" stroke-miterlimit="10" d="M3.6829999999999927,93.014a89.013,89.013 0 1,0 178.026,0a89.013,89.013 0 1,0 -178.026,0"/>
</mask>
</defs>
<path id="cirkel" style="mask: url(#mask-cirkel);" d="M92.696,186.027c-51.288,0-93.013-41.726-93.013-93.014S41.409,0,92.696,0s93.013,41.727,93.013,93.015
S143.984,186.027,92.696,186.027z M92.696,8C45.82,8,7.683,46.137,7.683,93.014s38.137,85.014,85.013,85.014
s85.013-38.137,85.013-85.014S139.573,8,92.696,8z"/>
<g id="l">
<path id="l-1-1" style="mask: url(#mask-l-1-1);" d="M118.746,42.38l-3.498,5.077c0.135,0.371,0.228,0.785,0.228,1.29c0,1.65-0.766,3.502-2.271,5.494
c-1.588,2.098-3.459,4.146-5.561,6.075c-2.14,1.962-4.335,3.812-6.527,5.482c-1.211,0.929-2.298,1.739-3.253,2.43c0,0,0,0,0,0.001
c-3.865,2.9-8.178,5.521-8.178,5.521s0,0,0-0.001l-0.001,0.001c-2.521,1.682-5.14,3.347-7.78,4.97
c-2.713,1.658-5.338,3.208-7.806,4.585c-2.527,1.424-4.851,2.702-6.899,3.815c-2.042,1.107-3.896,2.075-5.532,2.898
c-1.55,0.843-1.875,1.933-1.875,2.695c0,1.421,0.898,2.271,2.402,2.271c0.198,0,0.511-0.032,1.315-0.308l0.124-0.055
c2.767-1.469,6.344-3.409,10.936-5.924c3.87-2.13,7.981-4.514,12.254-7.1c0,0,3.608-2.058,8.171-5.201
c1.803-1.205,4.122-2.822,6.905-4.802c2.9-2.066,5.806-4.412,8.63-6.972c2.823-2.557,5.296-5.258,7.348-8.021
c2.117-2.846,3.188-5.67,3.188-8.385c0-2.021-0.543-3.74-1.62-5.114C119.234,42.836,118.996,42.599,118.746,42.38z"/>
<path id="l-1-2" style="mask: url(#mask-l-1-2);" d="M97.864,68.228c0.496-1.402,1.083-2.975,1.756-4.702c1.073-2.747,2.342-5.44,3.771-7.994
c1.407-2.516,3.021-4.69,4.799-6.467c1.699-1.701,3.532-2.527,5.604-2.527c0.656,0,1.084,0.158,1.274,0.465
c0.08,0.131,0.124,0.299,0.18,0.454l3.498-5.077c-1.082-0.948-2.517-1.436-4.295-1.436c-3.45,0-6.563,1.297-9.253,3.849
c-2.591,2.461-4.9,5.469-6.861,8.944c-1.938,3.439-3.663,7.063-5.119,10.768c-1.433,3.649-2.59,6.678-3.532,9.244
c0.014-0.008,4.316-2.625,8.176-5.52C97.863,68.229,97.863,68.229,97.864,68.228z"/>
<path id="l-2-1" style="mask: url(#mask-l-2-1);" d="M86.822,81.6c-0.608,1.686-1.287,3.558-2.038,5.631c-1.11,3.063-2.368,6.288-3.739,9.578
c-1.383,3.332-2.929,6.773-4.587,10.227c-1.564,3.256-3.271,6.333-5.078,9.163c0,0,0,0,0,0s-1.403,2.627-3.389,5.012l0,0
c0,0-0.001,0.001-0.001,0.001c-2.216,2.853-4.579,5.235-7.034,7.084c-2.675,2.015-5.534,3.042-8.5,3.079v5.547
c4.053-0.26,7.848-1.707,11.29-4.329c3.621-2.764,7.031-6.359,10.148-10.693c1.939-2.555,3.326-4.936,3.326-4.936
c1.71-2.868,3.364-5.915,4.928-9.076c1.76-3.563,3.426-7.209,4.958-10.843c1.524-3.621,2.968-7.261,4.291-10.828
c1.281-3.458,2.478-6.733,3.595-9.817C90.43,79.544,86.822,81.6,86.822,81.6z"/>
<path id="l-2-2" style="mask: url(#mask-l-2-2);" d="M52.291,131.382c-1.178,0-2.102-0.348-2.819-1.061c-0.719-0.719-1.068-1.549-1.068-2.541
c0-1.418,0.448-2.518,1.372-3.369c0.998-0.914,2.239-1.623,3.694-2.102c1.507-0.502,3.077-0.84,4.667-1.003
c1.61-0.174,2.947-0.26,3.971-0.26c1.305,0,2.573,0.021,3.763,0.064c0.715,0.026,1.426,0.061,2.122,0.1
c1.985-2.385,3.388-5.011,3.388-5.011l0-0.001c-2.656-0.234-5.478-0.35-8.395-0.35c-1.783,0-3.841,0.18-6.118,0.537
c-2.293,0.36-4.485,0.975-6.511,1.829c-2.072,0.875-3.854,2.117-5.29,3.692c-1.495,1.646-2.256,3.777-2.256,6.348
c0,2.29,0.756,4.335,2.24,6.065c1.519,1.761,3.567,2.654,6.084,2.654c0.444,0,0.884-0.026,1.322-0.054v-5.547
C52.401,131.375,52.346,131.382,52.291,131.382z"/>
<path id="l-3" style="mask: url(#mask-l-3);" d="M138.434,105.592c-0.596-0.531-1.269-0.799-1.997-0.799c-0.925,0-1.74,0.346-2.472,1.084
c-0.934,1.113-1.594,1.876-2.083,2.404c-0.52,0.563-0.994,1.06-1.426,1.49c-0.429,0.43-0.855,0.834-1.28,1.217
c-0.433,0.391-1.037,0.889-1.833,1.506c-4.298,3.696-8.269,6.258-11.805,7.621c-3.537,1.362-7.044,2.056-10.432,2.056
c-2.225,0-4.457-0.191-6.641-0.569c-2.228-0.383-4.533-0.876-6.849-1.466c-2.225-0.563-4.638-1.15-7.384-1.8
c-2.223-0.526-4.577-0.983-7.013-1.37c0,0-1.387,2.381-3.326,4.936c2.967,0.426,5.808,0.951,8.452,1.559
c2.845,0.66,5.584,1.323,8.144,1.974c2.651,0.67,5.217,1.229,7.627,1.655c2.476,0.448,5.003,0.67,7.516,0.67
c3.862,0,7.838-0.77,11.813-2.291c3.972-1.519,8.364-4.262,13.052-8.154c0.884-0.703,1.613-1.303,2.192-1.79
c0.582-0.5,1.154-1.019,1.7-1.562c0.568-0.575,1.178-1.229,1.808-1.949c0.659-0.745,1.519-1.729,2.533-2.919
c0.415-0.416,0.634-0.937,0.634-1.505C139.365,106.832,139.044,106.139,138.434,105.592z"/>
</g>
<g id="het">
<path d="M224.994,12.783h5.677v13.245h14.303V12.783h5.677v31.244h-5.677V30.913H230.67v13.114h-5.677L224.994,12.783
L224.994,12.783z"/>
<path d="M262.725,12.783h18.702v4.885h-13.025v8.186h10.518v4.885h-10.518v8.405h13.729v4.885h-19.405V12.783z"/>
<path d="M301.654,17.668H291.4v-4.885h26.185v4.885h-10.254v26.359h-5.677V17.668z"/>
</g>
<g id="lekkerste">
<path d="M224.994,75.983h5.677v26.358h13.511v4.886h-19.188V75.983z"/>
<path d="M254.869,75.983h18.702v4.885h-13.025v8.186h10.519v4.885h-10.519v8.405h13.729v4.885h-19.406V75.983L254.869,75.983z"/>
<path d="M286.329,75.983h5.677v12.718h4.049l7.35-12.718h6.161l-8.846,14.874v0.088l9.373,16.282h-6.381l-7.657-13.643h-4.049
v13.643h-5.677V75.983L286.329,75.983z"/>
<path d="M320.957,75.983h5.678v12.718h4.048l7.35-12.718h6.161l-8.846,14.874v0.088l9.373,16.282h-6.381l-7.657-13.643h-4.048
v13.643h-5.678V75.983L320.957,75.983z"/>
<path d="M355.583,75.983h18.702v4.885H361.26v8.186h10.518v4.885H361.26v8.405h13.729v4.885h-19.406V75.983z"/>
<path d="M387.044,75.983h10.076c3.39,0,4.93,0.264,6.293,0.88c3.124,1.408,5.104,4.4,5.104,8.537c0,3.74-1.98,7.217-5.28,8.537
v0.088c0,0,0.439,0.439,1.057,1.54l6.425,11.662h-6.337l-6.205-11.662h-5.456v11.662h-5.677V75.983z M397.825,90.637
c3.036,0,4.93-1.805,4.93-4.93c0-2.992-1.276-4.84-5.722-4.84h-4.313v9.77H397.825L397.825,90.637z"/>
<path d="M421.859,99.219c0,0,3.388,3.3,7.789,3.3c2.376,0,4.532-1.231,4.532-3.784c0-5.589-14.742-4.621-14.742-14.214
c0-5.193,4.489-9.065,10.474-9.065c6.161,0,9.329,3.346,9.329,3.346l-2.464,4.619c0,0-2.992-2.729-6.909-2.729
c-2.641,0-4.709,1.541-4.709,3.741c0,5.544,14.698,4.181,14.698,14.17c0,4.973-3.784,9.152-10.297,9.152
c-6.953,0-10.782-4.269-10.782-4.269L421.859,99.219z"/>
<path d="M459.16,80.868h-10.254v-4.885h26.185v4.885h-10.253v26.359h-5.678V80.868z"/>
<path d="M485.383,75.983h18.702v4.885h-13.025v8.186h10.518v4.885h-10.518v8.405h13.729v4.885h-19.405V75.983z"/>
</g>
<g id="van">
<path d="M220.989,139.184h6.117l6.864,20.375c0.615,1.804,1.145,4.576,1.188,4.576h0.088c0.044,0,0.572-2.772,1.188-4.576
l6.908-20.375h6.072l-11.396,31.244h-5.633L220.989,139.184z"/>
<path d="M273.792,162.419h-10.958l-2.641,8.01h-5.854l11.002-31.244h5.94l11.002,31.244h-5.854L273.792,162.419z M268.291,144.596
c0,0-0.704,3.081-1.319,4.841l-2.772,8.36h8.186l-2.771-8.36c-0.572-1.76-1.232-4.841-1.232-4.841H268.291z"/>
<path d="M292.445,139.184h5.677l11.838,18.042c1.188,1.805,2.597,4.841,2.597,4.841h0.088c0,0-0.308-2.992-0.308-4.841v-18.042
h5.633v31.244h-5.633l-11.839-17.999c-1.188-1.805-2.597-4.841-2.597-4.841h-0.088c0,0,0.309,2.992,0.309,4.841v17.999h-5.677
V139.184L292.445,139.184z"/>
</g>
</svg>
There seems to be something wrong with the path definition of your 1-2-1 mask. If you replace that path definition with path definition of the l-2-1 shape it works perfectly. I can't see what's wrong myself - the original path seems to be perfectly valid and draws just fine outside a mask.
We're currently developing our new website and we've decided to use some new SVG features.
On one of our project pages we have a SVG animation that follows the paths and draws the outline then fades into the final finished image. (see images below)
Our current problem is the SVG animation that draws the outlines don't display within Firefox, The final image fades in as planned and we have tested in other browsers such as Chrome, Safari and everything works how we envisioned it.
If anyone could point us in the right direction we'd greatly appreciate it. Thank you.
URL - http://labs.madebyanalogue.co.uk/analogue/work/lucky-voice-app.php
<figure>
<div class="drawings ipad">
<img class="illustration" src="../images/work/lucky-voice-app/lucky-voice-app_01.jpg" alt="App Icon" />
<svg class="line-drawing" id="ipad" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" >
<g>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1283.635,402.858
c143.279,0,259.429,116.15,259.429,259.429s-116.15,259.429-259.429,259.429c-27.602,0-53.474-3.967-78.427-11.951
c-0.422-0.135-1.563-0.615-1.983-0.751c-103.918-33.845-179.019-131.515-179.019-246.727
C1024.206,519.008,1140.356,402.858,1283.635,402.858z"/>
</g>
<g>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1282.706,506.785
c86.061,0,155.826,69.766,155.826,155.826s-69.766,155.826-155.826,155.826c-16.579,0-32.119-2.383-47.107-7.178
c-0.253-0.081-0.939-0.369-1.191-0.451c-62.418-20.329-107.528-78.995-107.528-148.197
C1126.88,576.551,1196.646,506.785,1282.706,506.785z"/>
</g>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M1542.178,921.53l-518.028-0.139V402.91h518.34v468.332
c0,0,0.13,51.667,0.13,51.96C1542.622,923.495,1542.178,921.53,1542.178,921.53z"/>
<path display="none" fill="none" stroke="#000000" stroke-miterlimit="10" d="M1577.545,728.638
c0.599-1.922,1.098-24.892,1.098-28.13c0-3.238,0.339-44.827,0.339-44.827H979.276c0,0-0.247,62.331-0.247,64.659
c0,2.328,0.247,9.552,0.247,9.552l68.194-1h529.676L1577.545,728.638z"/>
<g id="_x31_024_1_">
<g>
<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M1448.534,362.935h-76.694h-253.605
c-74.395,0-134.703,60.312-134.703,134.705v330.295c0,74.394,60.309,134.705,134.703,134.705h330.299
c74.395,0,134.703-60.312,134.703-134.705V496.64C1583.237,422.247,1522.929,362.935,1448.534,362.935L1448.534,362.935z"/>
</g>
</g>
<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M1246.419,844.098v-71.26h-73.208v-74.207h-72.561
V479.5h146.582v72.708h74.399V479.5h144.605v219.131h-71.689h-0.221c0,0-0.019,0.74-0.019,1.245s0.019,1.304,0.019,1.304v70.658
h-72.695v72.26H1246.419z"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M1542.49,402.91l-519.979,519.979c0,0-39.178-36.889-39.178-97.555
V490c0,0,1.229-52.125,40.948-88.062c0,0,0.438,0.359,0.531,0.515c0.094,0.156,1.025,0.994,1.025,0.994l518.303,518.303"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1467.281,963.015V363.309h-73.211h-294.337
v597.87l0.238,0.399C1101.867,962.177,1467.281,963.015,1467.281,963.015z"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1320.359,962.015V362.309h-13.681h-58.024v597.87
l-0.952,0.399C1248.083,961.177,1320.359,962.015,1320.359,962.015z"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M984.654,700.014h599.706v-14.681V625.31H983.333
L984.654,700.014z"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M984.142,845.448h599.706l-0.488-72.723V478.388H985.49l-0.399,0.238
C984.493,480.522,984.142,845.448,984.142,845.448z"/>
</svg>
</div>
</figure>