Commit 7764af1e authored by Jehan's avatar Jehan

content: improving the 404 SVG animation for broken Firefox output.

Firefox seems to have problem on animating the visibility XML attribute
when a CSP policy is in action (likely case since it works locally, but
not on testing).
Is it a bug? Or is this XML attribute considered as style?
Fix various usages by replacing them with translation out of canvas or
opacity animation (not sure if opacity animation will work with CSP.
Let's see).
There is likely more to fix, but I want to see how it goes so far.
parent 34dfed4a
......@@ -79,12 +79,12 @@
id="namedview4423"
showgrid="false"
inkscape:zoom="0.70710678"
inkscape:cx="486.69929"
inkscape:cy="294.51905"
inkscape:cx="707.01866"
inkscape:cy="-1028.6799"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="layer1"
inkscape:current-layer="Wilber"
showguides="true"
inkscape:guide-bbox="true" />
<defs
......@@ -105,12 +105,12 @@
inkscape:collect="always"
xlink:href="#pattern6754"
id="pattern7993"
patternTransform="translate(592.60116,77.315401)" />
patternTransform="translate(592.60116,-1124.1088)" />
<pattern
inkscape:collect="always"
xlink:href="#pattern6752"
id="pattern7989"
patternTransform="translate(592.64919,76.960856)" />
patternTransform="translate(592.64919,-1124.4633)" />
<pattern
inkscape:collect="always"
xlink:href="#pattern7242"
......@@ -155,12 +155,12 @@
inkscape:collect="always"
xlink:href="#pattern6515"
id="pattern6710"
patternTransform="translate(51.577844,60.603431)" />
patternTransform="translate(51.577844,-540.10867)" />
<pattern
inkscape:collect="always"
xlink:href="#pattern6509"
id="pattern6708"
patternTransform="translate(42.812356,60.506711)" />
patternTransform="translate(42.812356,-540.20539)" />
<pattern
inkscape:collect="always"
xlink:href="#pattern6455"
......@@ -1292,7 +1292,7 @@
inkscape:collect="always"
xlink:href="#pattern6669-5"
id="pattern6976-3"
patternTransform="matrix(0.19616085,0.98057173,-0.98057173,0.19616085,765.64869,-22.927471)" />
patternTransform="matrix(0.19616085,0.98057173,-0.98057173,0.19616085,765.64869,-623.63951)" />
<pattern
inkscape:collect="always"
xlink:href="#pattern6509-6"
......@@ -6039,15 +6039,10 @@
ry="3.0498199" />
</g>
</g>
<g
id="line-old"
inkscape:label="#g7001"
transform="translate(638,-364)" />
<g
id="Wilber"
visibility="hidden"
inkscape:label="#g8949"
transform="translate(0,-153.83705)">
transform="translate(0,846.16298)">
<g
inkscape:label="#g7418"
inkscape:transform-center-y="15.359071"
......@@ -6068,10 +6063,8 @@
style="opacity:0.18500001;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="display:inline;"
id="pulled-line-1"
transform="matrix(1.6553826,0.17565761,-0.17565604,1.6553974,403.98181,-56.344387)"
visibility="hidden"
transform="matrix(1.6553826,0.17565761,-0.17565604,1.6553974,403.98181,-56.344417)"
inkscape:label="#g8173-2">
<path
sodipodi:nodetypes="cc"
......@@ -6092,11 +6085,10 @@
<rect
style="opacity:1;fill:#2e4078;fill-opacity:1;fill-rule:nonzero;stroke:#2e3436;stroke-width:1.66469097;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="handle-in-Wilber-hand"
visibility="hidden"
width="6.2536101"
height="15.817956"
x="373.89215"
y="-134"
x="720.89233"
y="905.99969"
rx="5.0770078"
ry="5.0770078" />
<g
......@@ -6118,11 +6110,13 @@
<path
style="opacity:1;fill:#2c4db6;fill-opacity:1;fill-rule:nonzero;stroke:#2e3436;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 80.985346,19.297882 1.762466,0 c 2.074864,0 3.745241,0.953088 3.745241,2.136968 l 0,14.091663 c 0,1.18388 -1.670377,2.136968 -3.745241,2.136968 l -1.762466,0 c -2.074864,0 -3.745241,-0.953088 -3.745241,-2.136968 l 0,-14.091663 c 0,-1.18388 1.670377,-2.136968 3.745241,-2.136968 z"
id="right-leg-3" />
id="right-leg-3"
inkscape:connector-curvature="0" />
<path
style="opacity:0.2;fill:url(#pattern6708);fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 81.334019,20.314108 1.150683,0 c 1.689598,0 3.049816,0.694347 3.049816,1.556831 l 0,13.27034 c 0,0.862485 -1.360218,1.556832 -3.049816,1.556832 l -1.150683,0 c -1.689598,0 -3.049816,-0.694347 -3.049816,-1.556832 l 0,-13.27034 c 0,-0.862484 1.360218,-1.556831 3.049816,-1.556831 z"
id="right-leg-4" />
id="right-leg-4"
inkscape:connector-curvature="0" />
</g>
<g
inkscape:label="#g7438"
......@@ -6160,11 +6154,9 @@
ry="1.5568311" />
</g>
<g
style="display:inline"
transform="matrix(1.664691,0,0,1.664691,218.19216,-30.415953)"
id="Wilber-jumping-legs"
visibility="hidden"
inkscape:label="#g7048-2">
inkscape:label="#g7048-2"
transform="matrix(1.664691,0,0,1.664691,218.19216,-30.415983)">
<g
transform="matrix(0.19616086,0.98057174,-0.98057174,0.19616086,336.8149,-22.132957)"
id="g7062-7">
......@@ -6218,9 +6210,8 @@
</g>
<g
id="ready-to-jump-legs"
visibility="hidden"
inkscape:label="#g12691"
transform="translate(0,-1.5000005)">
transform="translate(0,998.49997)">
<g
inkscape:label="#g7293"
id="right-leg-jump-ready"
......@@ -6345,12 +6336,11 @@
ry="2.9049964"
id="oh-mouth"
visibility="hidden"
style="display:inline;opacity:1;fill:url(#linearGradient7247);fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1.66469109;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
style="display:inline;visibility:hidden;opacity:1;fill:url(#linearGradient7247);fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1.66469109;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
inkscape:label="#path5376-5" />
<g
id="smiling-mouth"
inkscape:label="#g4864"
visibility="visible">
inkscape:label="#g4864">
<path
d="m 744.7637,-82.861614 c 11.2182,2.243733 16.9311,0.16329 20.2746,-2.418426 -0.8829,-1.14033 -2.391,-2.39101 -2.391,-2.39101 0,0 3.9175,1.08861 5.297,2.86922 1.3755,1.7755 0.5107,2.869435 0.1507,5.141178 -0.8014,-1.995297 -2.2972,-2.743565 -2.4997,-3.536358 -3.0069,4.156613 -10.4983,3.98394 -20.8316,0.335396 z"
style="color:#000000;display:inline;overflow:visible;fill:url(#linearGradient7558);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.9999997;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none"
......@@ -11899,7 +11889,7 @@
begin="0s"
fill="freeze"
calcMode="discrete"
path="m0,0 -28.5,-3 -10.5,3 -28.5,-3 -10.5,3 -28.5,-3 -10.5,3 -28.5,-3 -10.5,3 -28.5,-3 -10.5,3 -28.5,-3 -10.5,3 -28.5,-3 -10.5,3 -28.5,-3 -10,2 -27,-1 -8.5,1 " />
path="m0,-1000 -28.5,-3 -10.5,3 -28.5,-3 -10.5,3 -28.5,-3 -10.5,3 -28.5,-3 -10.5,3 -28.5,-3 -10.5,3 -28.5,-3 -10.5,3 -28.5,-3 -10.5,3 -28.5,-3 -10,2 -27,-1 -8.5,1 " />
<!-- Brush at (756.858,-85.23) with dim 42.855x16.783. -->
<animateTransform
xlink:href="#brush"
......@@ -11995,15 +11985,17 @@
calcMode="discrete"
fill="freeze"
values="hidden" />
<animate
<animateTransform
xlink:href="#ready-to-jump-legs"
type="translate"
additive="sum"
attributeName="transform"
attributeType="XML"
attributeName="visibility"
dur="1.1s"
begin="3.6s"
calcMode="discrete"
keyTimes="0;0.78"
values="visible;hidden"
values="0 -1000;0"
fill="freeze" />
<!-- JUMPING -->
<animateTransform
......@@ -12018,37 +12010,40 @@
calcMode="discrete"
keyTimes="0;0.6;1"
values="0;0 -40;0" />
<animate
<animateTransform
xlink:href="#left-leg"
additive="sum"
type="translate"
attributeName="transform"
attributeType="XML"
attributeName="visibility"
dur="0.6s"
begin="4.1s"
calcMode="discrete"
fill="freeze"
keyTimes="0;1"
values="hidden;visible" />
<animate
values="-1000;0" />
<animateTransform
xlink:href="#right-leg"
additive="sum"
type="translate"
attributeName="transform"
attributeType="XML"
attributeName="visibility"
dur="0.6s"
begin="4.1s"
calcMode="discrete"
fill="freeze"
keyTimes="0;1"
values="hidden;visible" />
values="-1000;0" />
<animate
xlink:href="#Wilber-jumping-legs"
attributeType="XML"
attributeName="visibility"
dur="0.6s"
begin="4.1s"
attributeName="opacity"
attributeType="CSS"
dur="4.7s"
begin="0s"
calcMode="discrete"
fill="freeze"
keyTimes="0;0.6;1"
values="hidden;visible;hidden" />
<!-- The handle position has moved with Wilber: 347 left and 40 pixels up. -->
keyTimes="0;0.948;1"
values="0;1;0" />
<animateTransform
xlink:href="#handle-in-Wilber-hand"
type="translate"
......@@ -12059,18 +12054,8 @@
begin="4.1s"
fill="freeze"
calcMode="discrete"
keyTimes="0;0.6"
values="0;347 40" />
<animate
xlink:href="#handle-in-Wilber-hand"
attributeType="XML"
attributeName="visibility"
dur="0.6s"
begin="4.1s"
calcMode="discrete"
fill="remove"
keyTimes="0;0.6;1"
values="hidden;visible;hidden" />
values="0;0 -1000;0" />
<!-- OH! -->
<animateTransform
xlink:href="#brush"
......@@ -12115,13 +12100,14 @@
values="hidden" />
<animate
xlink:href="#pulled-line-1"
attributeType="XML"
attributeName="visibility"
dur="3s"
begin="4.7s"
attributeName="opacity"
attributeType="CSS"
dur="7.7s"
begin="0s"
calcMode="discrete"
fill="remove"
values="visible" />
fill="freeze"
keyTimes="0;0.61;1"
values="0;1;0" />
<!-- Getting second arm on handle. -->
<animateTransform
xlink:href="#left-arm"
......@@ -12187,25 +12173,29 @@
fill="freeze"
keyTimes="0;0.4;0.55;0.7;0.85;1"
values="visible;hidden;visible;hidden;visible;hidden" />
<animate
<animateTransform
xlink:href="#ready-to-jump-legs"
type="translate"
additive="sum"
attributeName="transform"
attributeType="XML"
attributeName="visibility"
dur="3s"
begin="4.7s"
calcMode="discrete"
keyTimes="0;0.4;0.55;0.7;0.85;1"
values="hidden;visible;hidden;visible;hidden;visible"
values="0;0 -1000;0;0 -1000;0;0 -1000"
fill="freeze" />
<animate
<animateTransform
xlink:href="#ready-to-jump-legs"
type="translate"
additive="sum"
attributeName="transform"
attributeType="XML"
attributeName="visibility"
dur="0.1s"
begin="7.7s"
calcMode="discrete"
keyTimes="0;1"
values="visible;hidden"
values="0;0 1000"
fill="freeze" />
<animateTransform
xlink:href="#left-arm"
......@@ -12304,22 +12294,16 @@
<!-- Microsoft browsers have no animation support.
I make sure that the "default" is an acceptable static image by hiding elements.
As a consequence, I have to set things right for the animation. -->
<animate
xlink:href="#Wilber"
attributeType="XML"
attributeName="visibility"
dur="0.1s"
begin="0s"
calcMode="discrete"
values="visible"
fill="freeze" />
<animate
<animateTransform
xlink:href="#Wilber-fell"
calcMode="discrete"
type="translate"
attributeType="XML"
attributeName="visibility"
attributeName="transform"
additive="sum"
dur="8.5s"
begin="0s"
values="hidden"
keyTimes="0;1"
values="-5000;0"
fill="remove" />
</svg>
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment