I want to overlay a text and/or path element with a gradient but I want this gradient to be fixed - just like the css background attribute "background-attachment:fixed;" - so when I animate the text/path, the gradient shouldn't move.
I managed to achieve the desired effect animating the "x"-position but this won't work on my android tablet (4.1.2, stock browser) - see the second line in the jsfiddle.
When animating the "transform"-attribute, the gradient will also move - see first and third line in the jsfiddle.
And while the first method works with text elements, it won't work if applied to a svg group since a group cannot have a x-coordinate. In this case I would have to animate every path element inside the group, I guess?
I just started playing around with SVGs so this might be easy for you to solve but I can't figure out how to do it.
<?xml version="1.0" encoding="UTF-8"?>
<svg class="HeadlineSVG" style="background-color:#333333;" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" preserveAspectRatio="xMidYMid slice" width="350" height="250" viewBox="0 0 700 500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad" gradientUnits="userSpaceOnUse">
<stop offset="0%" style="stop-color:#1ad1b4;stop-opacity:1" />
<stop offset="25%" style="stop-color:#18af7c;stop-opacity:1" />
<stop offset="45%" style="stop-color:#6effd1;stop-opacity:1" />
<stop offset="45%" style="stop-color:#ff0000;stop-opacity:1" />
<stop offset="55%" style="stop-color:#ff0000;stop-opacity:1" />
<stop offset="55%" style="stop-color:#6effd1;stop-opacity:1" />
<stop offset="75%" style="stop-color:#25b7d2;stop-opacity:1" />
<stop offset="100%" style="stop-color:#58f0fa;stop-opacity:1" />
</linearGradient>
<filter id="dropshadow" style="color-interpolation-filters:sRGB;">
<feFlood flood-opacity="0.8" flood-color="rgb(0,0,0)" result="flood" />
<feComposite in2="SourceGraphic" in="flood" operator="in" result="composite1" />
<feOffset dx="3" dy="3" result="offset" />
<feComposite in2="offset" in="SourceGraphic" operator="over" result="composite2" />
</filter>
</defs>
<text x="0%" y="10%" dominant-baseline="central" font-family="Impact" font-size="50px" fill="url(#grad1)" text-anchor="middle" filter="url(#dropshadow)" id="Headline">
AWESOME TEXT 1
<animateTransform attributeName="transform" type="translate" begin="0" dur="15" from="875" to="-225" repeatCount="indefinite" />
</text>
<text x="0%" y="20%" dominant-baseline="central" font-family="Impact" font-size="50px" fill="url(#grad1)" text-anchor="middle" filter="url(#dropshadow)" id="Headline2">
AWESOME TEXT 2
<animate attributeName="x" begin="0" dur="15" from="875" to="-225" repeatCount="indefinite" />
</text>
<text x="0%" y="30%" dominant-baseline="central" font-family="Impact" font-size="50px" fill="url(#grad1)" text-anchor="middle" filter="url(#dropshadow)" id="Headline3">
AWESOME TEXT 3
<animateMotion from="875,00" to="-225,00" dur="15s" repeatCount="indefinite" />
</text>
<g id="Vector1" fill="url(#grad1)" filter="url(#dropshadow)">
<animateMotion from="550,-50" to="-550,-50" dur="15s" repeatCount="indefinite" />
<path d="M177.781,224.597l5.877,39.526h-10.504l-0.551-7.104h-3.677l-0.618,7.104h-10.626l5.243-39.526H177.781z M172.333,250.012
c-0.52-4.477-1.042-10.011-1.565-16.602c-1.047,7.569-1.705,13.103-1.973,16.602H172.333z"/>
<path d="M223.197,224.597l-4.577,39.526h-12.833c-1.175-6.072-2.212-12.982-3.111-20.728c-0.41,3.321-1.366,10.23-2.867,20.728
h-12.759l-4.601-39.526h9.985l1.086,13.792l1.05,13.333c0.379-6.899,1.326-15.941,2.842-27.124h10.673
c0.142,1.156,0.515,5.501,1.121,13.037l1.135,15.039c0.584-9.568,1.541-18.927,2.869-28.076H223.197z"/>
<path d="M225.223,224.597h17.139v7.91h-6.86v7.495h6.421v7.52h-6.421v8.691h7.544v7.91h-17.822V224.597z"/>
<path d="M267.777,236.56h-9.546v-2.93c0-1.367-0.122-2.238-0.366-2.612c-0.244-0.374-0.651-0.562-1.221-0.562
c-0.619,0-1.086,0.252-1.404,0.758c-0.317,0.505-0.476,1.27-0.476,2.296c0,1.319,0.178,2.313,0.535,2.98
c0.341,0.668,1.309,1.474,2.905,2.417c4.575,2.716,7.457,4.944,8.645,6.686c1.188,1.742,1.782,4.549,1.782,8.423
c0,2.816-0.33,4.891-0.989,6.226s-1.933,2.454-3.821,3.356c-1.888,0.904-4.085,1.355-6.592,1.355c-2.751,0-5.099-0.521-7.043-1.563
c-1.945-1.041-3.219-2.368-3.821-3.979c-0.603-1.611-0.903-3.897-0.903-6.86v-2.588h9.546v4.81c0,1.481,0.134,2.434,0.403,2.856
c0.269,0.424,0.745,0.635,1.428,0.635s1.192-0.269,1.526-0.806c0.333-0.537,0.5-1.335,0.5-2.393c0-2.327-0.317-3.849-0.952-4.565
c-0.651-0.716-2.254-1.912-4.81-3.589c-2.556-1.692-4.248-2.921-5.078-3.687c-0.83-0.765-1.518-1.823-2.063-3.174
c-0.545-1.351-0.818-3.076-0.818-5.176c0-3.027,0.386-5.241,1.16-6.641c0.773-1.399,2.022-2.494,3.748-3.284
c1.725-0.789,3.809-1.184,6.25-1.184c2.669,0,4.944,0.432,6.824,1.294c1.88,0.863,3.125,1.949,3.735,3.259
c0.61,1.311,0.916,3.536,0.916,6.677V236.56z"/>
<path d="M295.34,247.741c0,3.972-0.094,6.783-0.281,8.435c-0.188,1.652-0.773,3.162-1.758,4.529
c-0.985,1.367-2.315,2.417-3.992,3.149c-1.677,0.732-3.63,1.099-5.859,1.099c-2.116,0-4.016-0.346-5.701-1.037
s-3.04-1.729-4.065-3.113c-1.025-1.383-1.636-2.889-1.831-4.517s-0.293-4.476-0.293-8.545v-6.763c0-3.971,0.093-6.783,0.281-8.435
c0.187-1.652,0.773-3.162,1.758-4.529c0.984-1.367,2.315-2.417,3.992-3.149c1.676-0.732,3.629-1.099,5.859-1.099
c2.116,0,4.016,0.346,5.701,1.038c1.685,0.692,3.04,1.729,4.065,3.113c1.025,1.384,1.636,2.889,1.831,4.517
c0.195,1.628,0.293,4.476,0.293,8.545V247.741z M285.062,234.753c0-1.839-0.102-3.015-0.305-3.528
c-0.204-0.513-0.623-0.769-1.257-0.769c-0.537,0-0.948,0.208-1.233,0.623c-0.285,0.415-0.427,1.64-0.427,3.674v18.457
c0,2.295,0.093,3.711,0.281,4.248c0.187,0.537,0.623,0.806,1.306,0.806c0.7,0,1.147-0.309,1.343-0.928
c0.195-0.618,0.293-2.092,0.293-4.419V234.753z"/>
<path d="M330.887,224.597v39.526h-8.984l-0.012-26.685l-3.577,26.685h-6.372l-3.772-26.074l-0.012,26.074h-8.984v-39.526h13.3
c0.394,2.376,0.801,5.177,1.22,8.403l1.459,10.054l2.362-18.457H330.887z"/>
<path d="M335.013,224.597h17.139v7.91h-6.861v7.495h6.421v7.52h-6.421v8.691h7.544v7.91h-17.823V224.597z"/>
<path d="M389.041,224.597l-5.23,39.526h-15.613l-5.938-39.526h10.84c1.26,10.888,2.158,20.101,2.697,27.637
c0.531-7.617,1.094-14.379,1.691-20.287l0.713-7.35H389.041z"/>
<path d="M390.775,224.597h17.139v7.91h-6.861v7.495h6.422v7.52h-6.422v8.691h7.545v7.91h-17.822V224.597z"/>
<path d="M435.551,241.809h-10.279v-6.87c0-1.997-0.109-3.244-0.328-3.739c-0.221-0.495-0.705-0.743-1.453-0.743
c-0.848,0-1.385,0.301-1.611,0.903c-0.229,0.603-0.342,1.904-0.342,3.906v18.359c0,1.921,0.113,3.174,0.342,3.76
c0.227,0.586,0.74,0.879,1.537,0.879c0.766,0,1.266-0.293,1.502-0.881s0.354-1.966,0.354-4.137v-4.968h10.279v1.541
c0,4.091-0.289,6.993-0.867,8.704c-0.578,1.712-1.855,3.212-3.832,4.499c-1.979,1.287-4.416,1.932-7.313,1.932
c-3.012,0-5.494-0.545-7.447-1.636s-3.246-2.601-3.881-4.528c-0.635-1.93-0.953-4.83-0.953-8.704v-11.548
c0-2.848,0.098-4.984,0.293-6.409c0.195-1.424,0.777-2.795,1.746-4.114s2.311-2.356,4.029-3.113
c1.717-0.757,3.689-1.135,5.92-1.135c3.027,0,5.525,0.585,7.494,1.755s3.264,2.629,3.883,4.377
c0.617,1.747,0.928,4.465,0.928,8.155V241.809z"/>
<path d="M459.939,224.597v7.91h-6.104v31.616h-10.277v-31.616h-6.08v-7.91H459.939z"/>
<path d="M485.77,247.741c0,3.972-0.094,6.783-0.279,8.435c-0.188,1.652-0.773,3.162-1.758,4.529
c-0.986,1.367-2.316,2.417-3.992,3.149c-1.678,0.732-3.631,1.099-5.859,1.099c-2.117,0-4.016-0.346-5.701-1.037
c-1.684-0.691-3.039-1.729-4.064-3.113c-1.025-1.383-1.637-2.889-1.832-4.517s-0.293-4.476-0.293-8.545v-6.763
c0-3.971,0.094-6.783,0.281-8.435c0.188-1.652,0.773-3.162,1.758-4.529s2.314-2.417,3.992-3.149
c1.676-0.732,3.629-1.099,5.859-1.099c2.115,0,4.016,0.346,5.701,1.038c1.684,0.692,3.039,1.729,4.064,3.113
c1.025,1.384,1.635,2.889,1.83,4.517c0.195,1.628,0.293,4.476,0.293,8.545V247.741z M475.492,234.753
c0-1.839-0.102-3.015-0.305-3.528c-0.205-0.513-0.623-0.769-1.258-0.769c-0.537,0-0.949,0.208-1.232,0.623
c-0.285,0.415-0.428,1.64-0.428,3.674v18.457c0,2.295,0.094,3.711,0.281,4.248c0.186,0.537,0.621,0.806,1.305,0.806
c0.699,0,1.148-0.309,1.344-0.928c0.195-0.618,0.293-2.092,0.293-4.419V234.753z"/>
<path d="M489.604,224.597h7.275c4.85,0,8.133,0.188,9.852,0.562c1.717,0.375,3.115,1.331,4.199,2.869
c1.082,1.538,1.623,3.992,1.623,7.361c0,3.076-0.383,5.144-1.148,6.201c-0.766,1.058-2.27,1.693-4.516,1.904
c2.033,0.505,3.4,1.18,4.102,2.026c0.699,0.847,1.135,1.624,1.307,2.332c0.17,0.708,0.256,2.657,0.256,5.847v10.425h-9.547v-13.135
c0-2.116-0.166-3.426-0.5-3.931c-0.334-0.504-1.209-0.757-2.625-0.757v17.822h-10.277V224.597z M499.881,231.359v8.789
c1.156,0,1.967-0.159,2.43-0.476c0.465-0.317,0.695-1.347,0.695-3.088v-2.173c0-1.253-0.223-2.075-0.67-2.466
C501.887,231.555,501.068,231.359,499.881,231.359z"/>
<path d="M540.262,224.597v39.526h-9.863v-21.191c0-3.06-0.072-4.899-0.219-5.518c-0.146-0.618-0.549-1.086-1.209-1.404
c-0.658-0.317-2.129-0.476-4.406-0.476h-0.977v-4.608c4.768-1.026,8.389-3.136,10.863-6.33H540.262z"/>
</g>
<g transform="translate(20,2.5)" id="Vector1" fill="url(#grad1)" filter="url(#dropshadow)">
<animate attributeName="x" begin="0" dur="15" from="875" to="-300" repeatCount="indefinite" />
<path d="M174.753,224.597l5.877,39.526h-10.504l-0.551-7.104h-3.677l-0.618,7.104h-10.626l5.243-39.526H174.753z M169.306,250.012
c-0.52-4.477-1.042-10.011-1.565-16.602c-1.047,7.569-1.705,13.103-1.973,16.602H169.306z"/>
<path d="M220.169,224.597l-4.577,39.526H202.76c-1.175-6.072-2.212-12.982-3.111-20.728c-0.41,3.321-1.366,10.23-2.867,20.728
h-12.759l-4.601-39.526h9.985l1.086,13.792l1.05,13.333c0.379-6.899,1.326-15.941,2.842-27.124h10.673
c0.142,1.156,0.515,5.501,1.121,13.037l1.135,15.039c0.584-9.568,1.541-18.927,2.869-28.076H220.169z"/>
<path d="M222.196,224.597h17.139v7.91h-6.86v7.495h6.421v7.52h-6.421v8.691h7.544v7.91h-17.822V224.597z"/>
<path d="M264.75,236.56h-9.546v-2.93c0-1.367-0.122-2.238-0.366-2.612c-0.244-0.374-0.651-0.562-1.221-0.562
c-0.619,0-1.086,0.252-1.404,0.758c-0.317,0.505-0.476,1.27-0.476,2.296c0,1.319,0.178,2.313,0.535,2.98
c0.341,0.668,1.309,1.474,2.905,2.417c4.575,2.716,7.457,4.944,8.645,6.686c1.188,1.742,1.782,4.549,1.782,8.423
c0,2.816-0.33,4.891-0.989,6.226s-1.933,2.454-3.821,3.356c-1.888,0.904-4.085,1.355-6.592,1.355c-2.751,0-5.099-0.521-7.043-1.563
c-1.945-1.041-3.219-2.368-3.821-3.979c-0.603-1.611-0.903-3.897-0.903-6.86v-2.588h9.546v4.81c0,1.481,0.134,2.434,0.403,2.856
c0.269,0.424,0.745,0.635,1.428,0.635s1.192-0.269,1.526-0.806c0.333-0.537,0.5-1.335,0.5-2.393c0-2.327-0.317-3.849-0.952-4.565
c-0.651-0.716-2.254-1.912-4.81-3.589c-2.556-1.692-4.248-2.921-5.078-3.687c-0.83-0.765-1.518-1.823-2.063-3.174
c-0.545-1.351-0.818-3.076-0.818-5.176c0-3.027,0.386-5.241,1.16-6.641c0.773-1.399,2.022-2.494,3.748-3.284
c1.725-0.789,3.809-1.184,6.25-1.184c2.669,0,4.944,0.432,6.824,1.294c1.88,0.863,3.125,1.949,3.735,3.259
c0.61,1.311,0.916,3.536,0.916,6.677V236.56z"/>
<path d="M292.313,247.741c0,3.972-0.094,6.783-0.281,8.435c-0.188,1.652-0.773,3.162-1.758,4.529
c-0.985,1.367-2.315,2.417-3.992,3.149c-1.677,0.732-3.63,1.099-5.859,1.099c-2.116,0-4.016-0.346-5.701-1.037
s-3.04-1.729-4.065-3.113c-1.025-1.383-1.636-2.889-1.831-4.517s-0.293-4.476-0.293-8.545v-6.763c0-3.971,0.093-6.783,0.281-8.435
c0.187-1.652,0.773-3.162,1.758-4.529c0.984-1.367,2.315-2.417,3.992-3.149c1.676-0.732,3.629-1.099,5.859-1.099
c2.116,0,4.016,0.346,5.701,1.038c1.685,0.692,3.04,1.729,4.065,3.113c1.025,1.384,1.636,2.889,1.831,4.517
c0.195,1.628,0.293,4.476,0.293,8.545V247.741z M282.035,234.753c0-1.839-0.102-3.015-0.305-3.528
c-0.204-0.513-0.623-0.769-1.257-0.769c-0.537,0-0.948,0.208-1.233,0.623c-0.285,0.415-0.427,1.64-0.427,3.674v18.457
c0,2.295,0.093,3.711,0.281,4.248c0.187,0.537,0.623,0.806,1.306,0.806c0.7,0,1.147-0.309,1.343-0.928
c0.195-0.618,0.293-2.092,0.293-4.419V234.753z"/>
<path d="M327.86,224.597v39.526h-8.984l-0.012-26.685l-3.577,26.685h-6.372l-3.772-26.074l-0.012,26.074h-8.984v-39.526h13.3
c0.394,2.376,0.801,5.177,1.22,8.403l1.459,10.054l2.362-18.457H327.86z"/>
<path d="M331.986,224.597h17.139v7.91h-6.86v7.495h6.421v7.52h-6.421v8.691h7.544v7.91h-17.822V224.597z"/>
<path d="M386.014,224.597l-5.23,39.526H365.17l-5.938-39.526h10.84c1.26,10.888,2.158,20.101,2.697,27.637
c0.531-7.617,1.094-14.379,1.691-20.287l0.713-7.35H386.014z"/>
<path d="M387.748,224.597h17.139v7.91h-6.861v7.495h6.422v7.52h-6.422v8.691h7.545v7.91h-17.822V224.597z"/>
<path d="M432.523,241.809h-10.279v-6.87c0-1.997-0.109-3.244-0.328-3.739c-0.221-0.495-0.705-0.743-1.453-0.743
c-0.848,0-1.385,0.301-1.611,0.903c-0.229,0.603-0.342,1.904-0.342,3.906v18.359c0,1.921,0.113,3.174,0.342,3.76
c0.227,0.586,0.74,0.879,1.537,0.879c0.766,0,1.266-0.293,1.502-0.881s0.354-1.966,0.354-4.137v-4.968h10.279v1.541
c0,4.091-0.289,6.993-0.867,8.704c-0.578,1.712-1.855,3.212-3.832,4.499c-1.979,1.287-4.416,1.932-7.313,1.932
c-3.012,0-5.494-0.545-7.447-1.636s-3.246-2.601-3.881-4.528c-0.635-1.93-0.953-4.83-0.953-8.704v-11.548
c0-2.848,0.098-4.984,0.293-6.409c0.195-1.424,0.777-2.795,1.746-4.114s2.311-2.356,4.029-3.113
c1.717-0.757,3.689-1.135,5.92-1.135c3.027,0,5.525,0.585,7.494,1.755s3.264,2.629,3.883,4.377
c0.617,1.747,0.928,4.465,0.928,8.155V241.809z"/>
<path d="M456.912,224.597v7.91h-6.104v31.616h-10.277v-31.616h-6.08v-7.91H456.912z"/>
<path d="M482.742,247.741c0,3.972-0.094,6.783-0.279,8.435c-0.188,1.652-0.773,3.162-1.758,4.529
c-0.986,1.367-2.316,2.417-3.992,3.149c-1.678,0.732-3.631,1.099-5.859,1.099c-2.117,0-4.016-0.346-5.701-1.037
c-1.684-0.691-3.039-1.729-4.064-3.113c-1.025-1.383-1.637-2.889-1.832-4.517s-0.293-4.476-0.293-8.545v-6.763
c0-3.971,0.094-6.783,0.281-8.435c0.188-1.652,0.773-3.162,1.758-4.529s2.314-2.417,3.992-3.149
c1.676-0.732,3.629-1.099,5.859-1.099c2.115,0,4.016,0.346,5.701,1.038c1.684,0.692,3.039,1.729,4.064,3.113
c1.025,1.384,1.635,2.889,1.83,4.517c0.195,1.628,0.293,4.476,0.293,8.545V247.741z M472.465,234.753
c0-1.839-0.102-3.015-0.305-3.528c-0.205-0.513-0.623-0.769-1.258-0.769c-0.537,0-0.949,0.208-1.232,0.623
c-0.285,0.415-0.428,1.64-0.428,3.674v18.457c0,2.295,0.094,3.711,0.281,4.248c0.186,0.537,0.621,0.806,1.305,0.806
c0.699,0,1.148-0.309,1.344-0.928c0.195-0.618,0.293-2.092,0.293-4.419V234.753z"/>
<path d="M486.576,224.597h7.275c4.85,0,8.133,0.188,9.852,0.562c1.717,0.375,3.115,1.331,4.199,2.869
c1.082,1.538,1.623,3.992,1.623,7.361c0,3.076-0.383,5.144-1.148,6.201c-0.766,1.058-2.27,1.693-4.516,1.904
c2.033,0.505,3.4,1.18,4.102,2.026c0.699,0.847,1.135,1.624,1.307,2.332c0.17,0.708,0.256,2.657,0.256,5.847v10.425h-9.547v-13.135
c0-2.116-0.166-3.426-0.5-3.931c-0.334-0.504-1.209-0.757-2.625-0.757v17.822h-10.277V224.597z M496.854,231.359v8.789
c1.156,0,1.967-0.159,2.43-0.476c0.465-0.317,0.695-1.347,0.695-3.088v-2.173c0-1.253-0.223-2.075-0.67-2.466
C498.859,231.555,498.041,231.359,496.854,231.359z"/>
<path d="M543.289,257.385v6.738h-21.703l0.006-5.64c6.428-10.514,10.25-17.021,11.463-19.519c1.211-2.498,1.818-4.447,1.818-5.847
c0-1.074-0.184-1.875-0.551-2.405c-0.367-0.529-0.924-0.793-1.674-0.793s-1.309,0.293-1.676,0.879
c-0.365,0.586-0.549,1.75-0.549,3.491v3.76h-8.838v-1.44c0-2.213,0.113-3.959,0.342-5.237c0.227-1.277,0.789-2.535,1.684-3.772
c0.895-1.237,2.059-2.173,3.492-2.808c1.432-0.635,3.148-0.952,5.15-0.952c3.922,0,6.889,0.973,8.9,2.917
c2.01,1.945,3.014,4.407,3.014,7.385c0,2.263-0.564,4.655-1.697,7.178c-1.131,2.523-4.463,7.878-9.998,16.064H543.289z"/>
</g>
<g id="Vector3" fill="url(#grad1)" filter="url(#dropshadow)">
<animateTransform attributeName="transform" type="translate" begin="0" dur="15" from="550,50" to="-550,50" repeatCount="indefinite" />
<path d="M174.045,224.597l5.877,39.526h-10.504l-0.551-7.104h-3.677l-0.618,7.104h-10.626l5.243-39.526H174.045z M168.598,250.012
c-0.52-4.477-1.042-10.011-1.565-16.602c-1.047,7.569-1.705,13.103-1.973,16.602H168.598z"/>
<path d="M219.461,224.597l-4.577,39.526h-12.833c-1.175-6.072-2.212-12.982-3.111-20.728c-0.41,3.321-1.366,10.23-2.867,20.728
h-12.759l-4.601-39.526h9.985l1.086,13.792l1.05,13.333c0.379-6.899,1.326-15.941,2.842-27.124h10.673
c0.142,1.156,0.515,5.501,1.121,13.037l1.135,15.039c0.584-9.568,1.541-18.927,2.869-28.076H219.461z"/>
<path d="M221.488,224.597h17.139v7.91h-6.86v7.495h6.421v7.52h-6.421v8.691h7.544v7.91h-17.822V224.597z"/>
<path d="M264.042,236.56h-9.546v-2.93c0-1.367-0.122-2.238-0.366-2.612c-0.244-0.374-0.651-0.562-1.221-0.562
c-0.619,0-1.086,0.252-1.404,0.758c-0.317,0.505-0.476,1.27-0.476,2.296c0,1.319,0.178,2.313,0.535,2.98
c0.341,0.668,1.309,1.474,2.905,2.417c4.575,2.716,7.457,4.944,8.645,6.686c1.188,1.742,1.782,4.549,1.782,8.423
c0,2.816-0.33,4.891-0.989,6.226s-1.933,2.454-3.821,3.356c-1.888,0.904-4.085,1.355-6.592,1.355c-2.751,0-5.099-0.521-7.043-1.563
c-1.945-1.041-3.219-2.368-3.821-3.979c-0.603-1.611-0.903-3.897-0.903-6.86v-2.588h9.546v4.81c0,1.481,0.134,2.434,0.403,2.856
c0.269,0.424,0.745,0.635,1.428,0.635s1.192-0.269,1.526-0.806c0.333-0.537,0.5-1.335,0.5-2.393c0-2.327-0.317-3.849-0.952-4.565
c-0.651-0.716-2.254-1.912-4.81-3.589c-2.556-1.692-4.248-2.921-5.078-3.687c-0.83-0.765-1.518-1.823-2.063-3.174
c-0.545-1.351-0.818-3.076-0.818-5.176c0-3.027,0.386-5.241,1.16-6.641c0.773-1.399,2.022-2.494,3.748-3.284
c1.725-0.789,3.809-1.184,6.25-1.184c2.669,0,4.944,0.432,6.824,1.294c1.88,0.863,3.125,1.949,3.735,3.259
c0.61,1.311,0.916,3.536,0.916,6.677V236.56z"/>
<path d="M291.605,247.741c0,3.972-0.094,6.783-0.281,8.435c-0.188,1.652-0.773,3.162-1.758,4.529
c-0.985,1.367-2.315,2.417-3.992,3.149c-1.677,0.732-3.63,1.099-5.859,1.099c-2.116,0-4.016-0.346-5.701-1.037
s-3.04-1.729-4.065-3.113c-1.025-1.383-1.636-2.889-1.831-4.517s-0.293-4.476-0.293-8.545v-6.763c0-3.971,0.093-6.783,0.281-8.435
c0.187-1.652,0.773-3.162,1.758-4.529c0.984-1.367,2.315-2.417,3.992-3.149c1.676-0.732,3.629-1.099,5.859-1.099
c2.116,0,4.016,0.346,5.701,1.038c1.685,0.692,3.04,1.729,4.065,3.113c1.025,1.384,1.636,2.889,1.831,4.517
c0.195,1.628,0.293,4.476,0.293,8.545V247.741z M281.327,234.753c0-1.839-0.102-3.015-0.305-3.528
c-0.204-0.513-0.623-0.769-1.257-0.769c-0.537,0-0.948,0.208-1.233,0.623c-0.285,0.415-0.427,1.64-0.427,3.674v18.457
c0,2.295,0.093,3.711,0.281,4.248c0.187,0.537,0.623,0.806,1.306,0.806c0.7,0,1.147-0.309,1.343-0.928
c0.195-0.618,0.293-2.092,0.293-4.419V234.753z"/>
<path d="M327.152,224.597v39.526h-8.984l-0.012-26.685l-3.577,26.685h-6.372l-3.772-26.074l-0.012,26.074h-8.984v-39.526h13.3
c0.394,2.376,0.801,5.177,1.22,8.403l1.459,10.054l2.362-18.457H327.152z"/>
<path d="M331.278,224.597h17.139v7.91h-6.86v7.495h6.421v7.52h-6.421v8.691h7.544v7.91h-17.822V224.597z"/>
<path d="M385.307,224.597l-5.23,39.526h-15.613l-5.939-39.526h10.84c1.26,10.888,2.16,20.101,2.698,27.637
c0.53-7.617,1.095-14.379,1.69-20.287l0.715-7.35H385.307z"/>
<path d="M387.039,224.597h17.139v7.91h-6.859v7.495h6.42v7.52h-6.42v8.691h7.543v7.91h-17.822V224.597z"/>
<path d="M431.814,241.809h-10.277v-6.87c0-1.997-0.109-3.244-0.33-3.739c-0.219-0.495-0.705-0.743-1.453-0.743
c-0.846,0-1.383,0.301-1.611,0.903c-0.229,0.603-0.342,1.904-0.342,3.906v18.359c0,1.921,0.113,3.174,0.342,3.76
s0.74,0.879,1.539,0.879c0.764,0,1.266-0.293,1.502-0.881c0.234-0.588,0.354-1.966,0.354-4.137v-4.968h10.277v1.541
c0,4.091-0.289,6.993-0.865,8.704c-0.578,1.712-1.855,3.212-3.834,4.499c-1.977,1.287-4.416,1.932-7.313,1.932
c-3.012,0-5.492-0.545-7.445-1.636s-3.248-2.601-3.883-4.528c-0.635-1.93-0.951-4.83-0.951-8.704v-11.548
c0-2.848,0.098-4.984,0.293-6.409c0.195-1.424,0.777-2.795,1.746-4.114c0.967-1.318,2.311-2.356,4.027-3.113
s3.689-1.135,5.92-1.135c3.027,0,5.525,0.585,7.496,1.755c1.969,1.17,3.262,2.629,3.881,4.377c0.619,1.747,0.928,4.465,0.928,8.155
V241.809z"/>
<path d="M456.205,224.597v7.91h-6.104v31.616h-10.279v-31.616h-6.078v-7.91H456.205z"/>
<path d="M482.035,247.741c0,3.972-0.094,6.783-0.281,8.435c-0.188,1.652-0.773,3.162-1.758,4.529s-2.316,2.417-3.992,3.149
s-3.629,1.099-5.859,1.099c-2.115,0-4.016-0.346-5.699-1.037c-1.686-0.691-3.041-1.729-4.066-3.113
c-1.025-1.383-1.635-2.889-1.83-4.517s-0.293-4.476-0.293-8.545v-6.763c0-3.971,0.094-6.783,0.281-8.435
c0.186-1.652,0.771-3.162,1.758-4.529c0.984-1.367,2.314-2.417,3.99-3.149s3.629-1.099,5.859-1.099
c2.115,0,4.018,0.346,5.701,1.038c1.686,0.692,3.039,1.729,4.064,3.113c1.025,1.384,1.637,2.889,1.832,4.517
c0.195,1.628,0.293,4.476,0.293,8.545V247.741z M471.756,234.753c0-1.839-0.102-3.015-0.305-3.528s-0.623-0.769-1.258-0.769
c-0.537,0-0.947,0.208-1.232,0.623s-0.428,1.64-0.428,3.674v18.457c0,2.295,0.094,3.711,0.281,4.248s0.623,0.806,1.307,0.806
c0.699,0,1.146-0.309,1.342-0.928c0.195-0.618,0.293-2.092,0.293-4.419V234.753z"/>
<path d="M485.867,224.597h7.275c4.85,0,8.135,0.188,9.852,0.562c1.717,0.375,3.117,1.331,4.199,2.869s1.623,3.992,1.623,7.361
c0,3.076-0.383,5.144-1.146,6.201c-0.766,1.058-2.271,1.693-4.518,1.904c2.035,0.505,3.402,1.18,4.102,2.026
c0.699,0.847,1.137,1.624,1.307,2.332c0.172,0.708,0.256,2.657,0.256,5.847v10.425h-9.545v-13.135c0-2.116-0.168-3.426-0.5-3.931
c-0.334-0.504-1.209-0.757-2.625-0.757v17.822h-10.279V224.597z M496.146,231.359v8.789c1.154,0,1.965-0.159,2.43-0.476
c0.463-0.317,0.695-1.347,0.695-3.088v-2.173c0-1.253-0.225-2.075-0.672-2.466S497.334,231.359,496.146,231.359z"/>
<path d="M539.848,241.723c1.496,0.505,2.611,1.332,3.344,2.479c0.732,1.148,1.1,3.839,1.1,8.073c0,3.143-0.359,5.582-1.074,7.316
c-0.717,1.734-1.953,3.053-3.711,3.957c-1.758,0.903-4.014,1.355-6.764,1.355c-3.125,0-5.578-0.525-7.359-1.574
c-1.783-1.051-2.955-2.336-3.516-3.857c-0.563-1.521-0.844-4.163-0.844-7.923v-3.125h9.863v6.421c0,1.709,0.102,2.795,0.307,3.26
c0.203,0.463,0.654,0.695,1.354,0.695c0.766,0,1.27-0.293,1.514-0.879s0.367-2.115,0.367-4.59v-2.734
c0-1.514-0.172-2.62-0.514-3.32c-0.342-0.7-0.846-1.16-1.514-1.379s-1.961-0.346-3.881-0.378v-5.737
c2.344,0,3.791-0.089,4.346-0.269c0.553-0.179,0.951-0.569,1.195-1.172c0.244-0.602,0.367-1.546,0.367-2.832v-2.197
c0-1.383-0.143-2.295-0.428-2.734s-0.729-0.659-1.33-0.659c-0.684,0-1.152,0.232-1.404,0.696s-0.379,1.453-0.379,2.966v3.247
h-9.863v-3.369c0-3.776,0.863-6.327,2.588-7.654c1.725-1.326,4.469-1.99,8.229-1.99c4.703,0,7.893,0.919,9.57,2.757
c1.676,1.838,2.514,4.392,2.514,7.661c0,2.212-0.301,3.81-0.902,4.794C542.418,240.012,541.361,240.91,539.848,241.723z"/>
</g>
The first method I tried was overlaying the text element with a pattern image defined in but this causes Chrome to slow down to an unacceptable framerate. See here: http://jsfiddle.net/gU6nK/
The next step would be to remove all animate-tags inside the svg and let snapsvg handle the animations.
Keeping the text elements would be nice so I can change the text with javascript but I think using paths achieves a better performance? Also I wouldn't have to include a custom webfont.
https://stackoverflow.com/questions/21256155
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian