Javascript 进入视口时启动SVG动画
我发现我的问题几乎没有解决办法，而且它们非常相似。我用了这个 在每个解决方案中，它都说要将begin属性设置为“unfinite”，但当我这样做而不是0时，我的动画将无法运行 这是我的代码： 我的动画应该是这样工作的： HTML: JS: 编辑： 它可以在Firefox和Chrome中运行，这要感谢@Scoots 但现在我对IE有问题了。我在fakesmile测试场添加了这段代码，因为我使用fakesmile.js在IE中运行动画，但它与“滚动功能”不兼容： 但如果我删除“滚动功能”并设置begin 0s，它在IE中运行良好：Javascript 进入视口时启动SVG动画,javascript,html,css,svg,Javascript,Html,Css,Svg,我发现我的问题几乎没有解决办法，而且它们非常相似。我用了这个 在每个解决方案中，它都说要将begin属性设置为“unfinite”，但当我这样做而不是0时，我的动画将无法运行 这是我的代码： 我的动画应该是这样工作的： HTML: JS: 编辑： 它可以在Firefox和Chrome中运行，这要感谢@Scoots 但现在我对IE有问题了。我在fakesmile测试场添加了这段代码，因为我使用fakesmile.js在IE中运行动画，但它与“滚动功能”不兼容： 但如果我删除“滚动功能”并设置be
document.getElementById（“anim”）.beginElement（）时导致javascript错误在上面。是的，我忽略了这一点。谢谢
<p>Scroll down</p>
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 60">
<defs>
<clipPath id="clip-path1">
<rect id="shadow" x="0" y="-1" width="700" height="60" >
<animate attributeName="x" dur="4s" begin="indefinite" from="-700" to="0" />
</rect>
</clipPath>
</defs>
<!-- White cross -->
<g fill="#fff">
<path
d="M150.398,22.5c-27.216,0-54.433,0-81.648,0c-9.672,0-9.672,15,0,15c27.216,0,54.433,0,81.648,0
C160.071,37.5,160.071,22.5,150.398,22.5z" />
<path
d="M630.504,22.5c-27.22,0-54.438,0-81.656,0c-9.673,0-9.673,15,0,15c27.219,0,54.438,0,81.656,0
C640.177,37.5,640.177,22.5,630.504,22.5z" />
<path
d="M470.467,22.5c-27.218,0-54.435,0-81.65,0c-9.672,0-9.672,15,0,15c27.217,0,54.434,0,81.65,0
C480.139,37.5,480.139,22.5,470.467,22.5z" />
<path
d="M310.433,22.5c-27.218,0-54.435,0-81.65,0c-9.673,0-9.673,15,0,15c27.217,0,54.434,0,81.65,0
C320.106,37.5,320.106,22.5,310.433,22.5z" />
<path
d="M509.178,17.526c-1.059,1.2-0.902,2.995,0.356,4.009l1.25,0.97l3.804-4.352l-1.202-0.963
C512.119,16.175,510.257,16.326,509.178,17.526z" />
<path
d="M512.193,28.784l-4.377,3.915l2.188,1.818c1.264,1.014,3.16,0.858,4.213-0.347c1.053-1.205,0.892-3.005-0.371-4.019
l-1.616-1.32L512.193,28.784z" />
<path
d="M499.349,31.645c-1.296-0.976-3.155-0.764-4.188,0.472c-1.017,1.235-0.798,3.026,0.496,4.001l1.867,1.49l3.804-4.356
l-1.82-1.479C499.453,31.727,499.402,31.685,499.349,31.645z" />
<path
d="M518.746,17.547l-2.668,2.666c-0.261,0.265-0.251,0.685,0.022,0.937c0.294,0.253,0.716,0.243,0.996-0.021l2.643-2.667
c0.028-0.024,0.054-0.051,0.078-0.078c0.239-0.286,0.191-0.706-0.104-0.938C519.427,17.215,518.973,17.26,518.746,17.547z" />
<path
d="M509.654,0C493.332,0,480.1,13.431,480.1,30c0,16.568,13.232,30,29.555,30c16.323,0,29.563-13.432,29.563-30
C539.217,13.431,525.977,0,509.654,0z M527.209,21.753c-1.221,1.339-2.553,2.03-3.947,2.03c-1.246-0.042-2.432-0.496-3.377-1.285
c-0.105-0.082-0.205-0.173-0.289-0.267l-6.646,5.903l1.564,1.267c1.708,1.367,1.92,3.783,0.479,5.4
c-1.429,1.616-3.942,1.819-5.636,0.454l-2.299-1.866l-7.075,6.248l4.296,3.475c0.056,0.027,0.104,0.066,0.145,0.111
c0.184,0.205,0.157,0.516-0.056,0.691c-0.213,0.176-0.542,0.152-0.726-0.055l-4.377-3.545l-2.086,1.849l-1.806,1.582
c-0.71,0.644-1.498,1.353-2.123,1.892c-0.397,0.373-1.025,0.393-1.438,0.045c-0.442-0.367-0.485-1.002-0.1-1.42l1.836-2.141
l1.578-1.816l1.703-1.945l-1.841-1.492c-1.688-1.367-1.907-3.784-0.473-5.398c1.432-1.615,3.959-1.816,5.654-0.449l1.822,1.479
l8.116-9.213l-1.243-1c-0.041-0.032-0.08-0.063-0.119-0.097c-1.648-1.397-1.829-3.818-0.365-5.406
c1.462-1.588,4.006-1.743,5.672-0.346l1.15,0.982l1.622-1.849c1.324-1.339,3.546-1.399,4.949-0.134
c1.399,1.266,1.462,3.376,0.138,4.715l-1.565,1.413c0.777,0.741,1.8,1.184,2.912,1.241c1.094-0.012,2.169-0.575,3.169-1.691
c0.182-0.204,0.489-0.228,0.724-0.054C527.365,21.239,527.391,21.547,527.209,21.753z" />
<path
d="M683.719,25.593c-0.824,0-1.654,0-2.478,0c-0.281-0.041-0.541,0.141-0.604,0.412c-0.264,0.805-0.549,1.611-0.836,2.424
c-0.188,0.605-0.396,1.205-0.617,1.902h0.75c1.69,0,3.377-0.066,5.074,0c0.793,0.09,1.56-0.301,1.935-0.98
c-0.813-1.115-1.629-2.238-2.476-3.34C684.29,25.777,684.028,25.625,683.719,25.593z" />
<path
d="M669.691,0c-16.322,0-29.555,13.431-29.555,30c0,16.568,13.231,30,29.555,30c16.323,0,29.555-13.432,29.555-30
C699.246,13.431,686.014,0,669.691,0z M668.262,37.925c-0.485,1.826-2.115,3.169-4.08,3.356c-0.272,0.035-0.554,0.019-0.817-0.051
c-1.125-0.287-1.795-1.393-1.498-2.471c0.482-1.908,2.211-3.293,4.265-3.404c0.252-0.018,0.503,0.01,0.748,0.08
C667.979,35.759,668.601,36.873,668.262,37.925z M683.397,41.167c-0.493,0.088-0.979,0.088-1.484,0
c-1.089-0.229-1.665-1.267-1.427-2.479c0.53-1.914,2.312-3.269,4.383-3.332c0.059-0.002,0.115-0.002,0.174,0.002
c1.128,0.065,1.974,0.978,1.906,2.039C686.942,39.041,685.253,40.848,683.397,41.167z M692.414,35.162
c0.108,0.242,0.186,0.492,0.254,0.746c-0.012,0.193-0.037,0.387-0.078,0.576c-0.031,1.332-0.763,1.672-1.91,1.774
c-0.769,0.056-1.56,0-2.273,0c0.033-0.579,0.033-1.159,0-1.739c-0.14-1.371-1.287-2.445-2.737-2.515
c-2.729-0.099-5.24,1.406-6.33,3.793c-0.092,0.324-0.435,0.533-0.781,0.492c-2.779,0-5.553,0-8.337,0h-0.511
c0.063-0.699,0.063-1.399,0-2.099c-0.233-1.229-1.308-2.143-2.62-2.213c-2.728-0.1-5.236,1.396-6.342,3.777
c-0.115,0.342-0.45,0.56-0.834,0.508h-2.593h-0.327c-1.628-0.055-1.748-1.309-1.27-2.297l0.087-0.193h0.492c0.59,0,1.169,0,1.76,0
c0.578-0.008,1.055-0.412,1.15-0.957c0.094-0.612-0.352-1.184-1.001-1.273c-0.218-0.026-0.444-0.041-0.689-0.037H647.06
c-0.265-0.019-0.465-0.108-0.497-0.495c-0.032-0.518,0.343-0.982,0.854-1.093c0.186-0.015,0.39-0.015,0.572,0
c2.834,0,5.653,0,8.501,0c0.465,0.006,0.697-0.035,0.829-0.563c0.132-0.525,0.391-1.036,0.529-1.568
c0.002-0.031,0.007-0.061,0.015-0.09c0.076-0.326,0.401-0.531,0.758-0.455c3.484,0,6.975,0,10.458,0
c0.279,0.006,0.551-0.043,0.805-0.141c0.481-0.215,0.739-0.717,0.635-1.211c-0.102-0.49-0.521-0.859-1.043-0.91
c-0.257-0.016-0.521-0.016-0.779,0h-2.936h-14.313c-0.022,0.002-0.043,0.002-0.058,0.002c-0.242-0.004-0.444-0.205-0.438-0.449
c-0.058-0.477,0.227-0.93,0.697-1.104c0.231-0.061,0.459-0.086,0.717-0.08c2.136,0,4.283,0,6.434,0
c0.011,0.004,0.021,0.004,0.029,0.006c0.389,0.051,0.74-0.207,0.793-0.574c0.15-0.588,0.416-1.121,0.579-1.729
c0.069-0.357,0.252-0.453,0.635-0.453c4.281,0,8.577,0,12.859,0c0.157,0,0.301,0,0.453,0c0.655,0.006,1.202-0.49,1.223-1.115
c0-0.033,0-0.068-0.005-0.102c-0.071-0.613-0.633-1.068-1.275-1.014h-1.319h-16.908h-0.075c-0.007,0-0.014,0-0.021,0
c-0.242,0.006-0.463-0.178-0.471-0.412c-0.11-0.453,0.142-0.918,0.577-1.115c0.244-0.102,0.503-0.148,0.762-0.139h23.92
c1.39,0,1.963,0.756,1.54,2.035c-0.338,0.953-0.652,1.891-0.974,2.836c-0.064,0.17-0.106,0.357-0.183,0.607h3.237
c0.8-0.002,1.534,0.424,1.898,1.101c0.749,1.121,1.622,2.182,2.407,3.285c0.37,0.553,0.961,0.959,1.629,1.141
c0.556,0.156,1.121,0.357,1.692,0.545c0.035,0.01,0.063,0.02,0.099,0.033c0.71,0.233,1.078,0.976,0.832,1.651
c-0.162,0.871-0.359,1.744-0.526,2.617C692.22,34.77,692.303,34.977,692.414,35.162z" />
<polygon points="177.92,41.173 185.154,37.883 181.382,34.25 " />
<path
d="M189.588,0c-16.321,0-29.555,13.431-29.555,30c0,16.568,13.232,30,29.555,30c16.323,0,29.562-13.432,29.562-30
C219.149,13.431,205.911,0,189.588,0z M186.622,39.279l-11.58,4.6l4.878-11.019l11.576-11.071l6.717,6.396L186.622,39.279z
M199.664,26.814l-6.704-6.405l1.327-1.275l6.707,6.414L199.664,26.814z M203.189,23.447l-0.348,0.319l-6.709-6.402l0.354-0.338
c0-0.001,0-0.001,0-0.002c1.26-1.203,3.31-1.201,4.582,0.002l2.121,2.043C204.448,20.273,204.448,22.239,203.189,23.447z" />
<path
d="M349.625,0c-16.321,0-29.555,13.431-29.555,30c0,16.568,13.232,30,29.555,30c16.323,0,29.556-13.432,29.556-30
C379.18,13.431,365.947,0,349.625,0z M345.309,42.794l-4.592-4.393l-8.944-8.552l4.597-4.394l8.939,8.551l17.57-16.8l4.598,4.394
L345.309,42.794z" />
<path
d="M29.555,0C13.232,0,0,13.431,0,30c0,16.568,13.232,30,29.556,30c16.327,0,29.561-13.432,29.561-30
C59.116,13.431,45.883,0,29.555,0z M40.768,45.548c-0.071,0.007-0.148,0.007-0.215,0H18.549c-0.052,0.007-0.107,0.007-0.166,0
c-0.413-0.041-0.704-0.396-0.66-0.786V27.531c-0.012-0.207,0.06-0.41,0.208-0.563c1.087-1.117,1.869-2.467,2.276-3.941
c0.314-1.051,0.475-2.141,0.466-3.236v-3.873c-0.035-0.393,0.273-0.734,0.683-0.768l2.872-0.498
c0.295-0.053,0.583-0.121,0.887-0.188c0.225-0.047,0.456,0.004,0.635,0.141c0.752,0.533,1.604,0.922,2.509,1.152
c0.943,0.238,1.933,0.219,2.861-0.063c0.819-0.234,1.589-0.609,2.273-1.105c0.178-0.125,0.413-0.172,0.629-0.119
c0.311,0.068,0.63,0.141,0.947,0.193c0.925,0.17,1.887,0.328,2.826,0.492c0.381,0.053,0.664,0.375,0.642,0.744
c0,1.377,0,2.752,0,4.127c0.006,1.861,0.511,3.689,1.479,5.305c0.327,0.559,0.73,1.074,1.203,1.539
c0.179,0.164,0.282,0.398,0.276,0.643v17.252h0.001C41.436,45.148,41.165,45.492,40.768,45.548z" />
<path
d="M39.898,27.742c-0.004-0.063-0.029-0.121-0.07-0.17c-0.385-0.404-0.735-0.842-1.039-1.301
c-1.192-1.869-1.824-4.01-1.832-6.193c0-1.166,0-2.328,0-3.492c0-0.09-0.031-0.135-0.126-0.135l-1.088-0.193l-1.03-0.17
c-0.003,0.023-0.003,0.047,0,0.068c0.055,0.555,0.023,1.113-0.088,1.66c-0.235,1.342-0.967,2.559-2.062,3.43
c-1.777,1.43-4.387,1.383-6.114-0.102c-1.436-1.223-2.191-3.018-2.042-4.848c0-0.074,0-0.152,0-0.238l-2.254,0.387v3.334
c0.006,1.182-0.149,2.355-0.478,3.492c-0.44,1.592-1.259,3.061-2.393,4.301c-0.055,0.059-0.082,0.135-0.076,0.213
c0,5.412,0,10.82,0,16.227v0.119h20.699l-0.007-0.023V27.742z M28.976,35.143h-0.001h-5.128c-0.008-0.097-0.008-0.197,0-0.295
v-0.232c-0.007-0.328,0.053-0.656,0.173-0.963c0.114-0.279,0.267-0.547,0.445-0.785c0.194-0.25,0.4-0.478,0.642-0.688l0.691-0.605
l0.5-0.461c0.15-0.145,0.292-0.293,0.413-0.424c0.102-0.127,0.2-0.269,0.273-0.413c0.067-0.133,0.101-0.277,0.101-0.426
c0.025-0.25-0.078-0.492-0.287-0.652c-0.192-0.133-0.438-0.203-0.676-0.195c-0.192-0.002-0.383,0.031-0.565,0.092
c-0.162,0.059-0.329,0.129-0.475,0.211c-0.129,0.072-0.259,0.154-0.368,0.248c-0.082,0.059-0.158,0.127-0.24,0.195l-0.801-1.102
c0.341-0.297,0.728-0.539,1.143-0.715c0.434-0.191,0.916-0.289,1.394-0.289c0.397-0.004,0.788,0.047,1.166,0.152
c0.3,0.082,0.565,0.227,0.808,0.42c0.21,0.178,0.369,0.408,0.462,0.658c0.102,0.281,0.16,0.578,0.152,0.875
c0,0.266-0.064,0.529-0.166,0.774c-0.118,0.252-0.267,0.492-0.431,0.715c-0.194,0.234-0.407,0.455-0.64,0.662
c-0.197,0.211-0.417,0.41-0.627,0.604c-0.123,0.101-0.229,0.214-0.362,0.334c-0.14,0.123-0.255,0.25-0.374,0.375l-0.318,0.358
c-0.068,0.08-0.126,0.173-0.17,0.268h3.265V35.143z M35.442,28.972c-0.294,0.32-0.56,0.662-0.785,1.025
c-0.293,0.467-0.559,0.946-0.786,1.44c-0.271,0.588-0.49,1.197-0.666,1.818c-0.184,0.625-0.305,1.264-0.35,1.91h-1.68
c0.049-0.543,0.142-1.082,0.277-1.613c0.133-0.563,0.296-1.119,0.495-1.668c0.196-0.518,0.425-1.023,0.685-1.52
c0.222-0.422,0.479-0.826,0.77-1.213h-3.344v-1.346h5.383V28.972z" />
<path
d="M27.777,20.343c0.748,0.504,1.693,0.66,2.576,0.422c0.843-0.223,1.572-0.734,2.052-1.434c0.536-0.76,0.827-1.652,0.83-2.57
c0-0.125,0-0.254,0-0.387c-2.262,1.283-5.078,1.283-7.341,0h-0.006c-0.02,0.094-0.026,0.193-0.025,0.289
c0.024,0.383,0.071,0.76,0.139,1.135C26.224,18.835,26.861,19.75,27.777,20.343z" />
</g>
<g clip-path="url(#clip-path1)" fill="#000">
<path
d="M150.398,22.5c-27.216,0-54.433,0-81.648,0c-9.672,0-9.672,15,0,15c27.216,0,54.433,0,81.648,0
C160.071,37.5,160.071,22.5,150.398,22.5z" />
<path
d="M630.504,22.5c-27.22,0-54.438,0-81.656,0c-9.673,0-9.673,15,0,15c27.219,0,54.438,0,81.656,0
C640.177,37.5,640.177,22.5,630.504,22.5z" />
<path
d="M470.467,22.5c-27.218,0-54.435,0-81.65,0c-9.672,0-9.672,15,0,15c27.217,0,54.434,0,81.65,0
C480.139,37.5,480.139,22.5,470.467,22.5z" />
<path
d="M310.433,22.5c-27.218,0-54.435,0-81.65,0c-9.673,0-9.673,15,0,15c27.217,0,54.434,0,81.65,0
C320.106,37.5,320.106,22.5,310.433,22.5z" />
<path
d="M509.178,17.526c-1.059,1.2-0.902,2.995,0.356,4.009l1.25,0.97l3.804-4.352l-1.202-0.963
C512.119,16.175,510.257,16.326,509.178,17.526z" />
<path
d="M512.193,28.784l-4.377,3.915l2.188,1.818c1.264,1.014,3.16,0.858,4.213-0.347c1.053-1.205,0.892-3.005-0.371-4.019
l-1.616-1.32L512.193,28.784z" />
<path
d="M499.349,31.645c-1.296-0.976-3.155-0.764-4.188,0.472c-1.017,1.235-0.798,3.026,0.496,4.001l1.867,1.49l3.804-4.356
l-1.82-1.479C499.453,31.727,499.402,31.685,499.349,31.645z" />
<path
d="M518.746,17.547l-2.668,2.666c-0.261,0.265-0.251,0.685,0.022,0.937c0.294,0.253,0.716,0.243,0.996-0.021l2.643-2.667
c0.028-0.024,0.054-0.051,0.078-0.078c0.239-0.286,0.191-0.706-0.104-0.938C519.427,17.215,518.973,17.26,518.746,17.547z" />
<path
d="M509.654,0C493.332,0,480.1,13.431,480.1,30c0,16.568,13.232,30,29.555,30c16.323,0,29.563-13.432,29.563-30
C539.217,13.431,525.977,0,509.654,0z M527.209,21.753c-1.221,1.339-2.553,2.03-3.947,2.03c-1.246-0.042-2.432-0.496-3.377-1.285
c-0.105-0.082-0.205-0.173-0.289-0.267l-6.646,5.903l1.564,1.267c1.708,1.367,1.92,3.783,0.479,5.4
c-1.429,1.616-3.942,1.819-5.636,0.454l-2.299-1.866l-7.075,6.248l4.296,3.475c0.056,0.027,0.104,0.066,0.145,0.111
c0.184,0.205,0.157,0.516-0.056,0.691c-0.213,0.176-0.542,0.152-0.726-0.055l-4.377-3.545l-2.086,1.849l-1.806,1.582
c-0.71,0.644-1.498,1.353-2.123,1.892c-0.397,0.373-1.025,0.393-1.438,0.045c-0.442-0.367-0.485-1.002-0.1-1.42l1.836-2.141
l1.578-1.816l1.703-1.945l-1.841-1.492c-1.688-1.367-1.907-3.784-0.473-5.398c1.432-1.615,3.959-1.816,5.654-0.449l1.822,1.479
l8.116-9.213l-1.243-1c-0.041-0.032-0.08-0.063-0.119-0.097c-1.648-1.397-1.829-3.818-0.365-5.406
c1.462-1.588,4.006-1.743,5.672-0.346l1.15,0.982l1.622-1.849c1.324-1.339,3.546-1.399,4.949-0.134
c1.399,1.266,1.462,3.376,0.138,4.715l-1.565,1.413c0.777,0.741,1.8,1.184,2.912,1.241c1.094-0.012,2.169-0.575,3.169-1.691
c0.182-0.204,0.489-0.228,0.724-0.054C527.365,21.239,527.391,21.547,527.209,21.753z" />
<path
d="M683.719,25.593c-0.824,0-1.654,0-2.478,0c-0.281-0.041-0.541,0.141-0.604,0.412c-0.264,0.805-0.549,1.611-0.836,2.424
c-0.188,0.605-0.396,1.205-0.617,1.902h0.75c1.69,0,3.377-0.066,5.074,0c0.793,0.09,1.56-0.301,1.935-0.98
c-0.813-1.115-1.629-2.238-2.476-3.34C684.29,25.777,684.028,25.625,683.719,25.593z" />
<path
d="M669.691,0c-16.322,0-29.555,13.431-29.555,30c0,16.568,13.231,30,29.555,30c16.323,0,29.555-13.432,29.555-30
C699.246,13.431,686.014,0,669.691,0z M668.262,37.925c-0.485,1.826-2.115,3.169-4.08,3.356c-0.272,0.035-0.554,0.019-0.817-0.051
c-1.125-0.287-1.795-1.393-1.498-2.471c0.482-1.908,2.211-3.293,4.265-3.404c0.252-0.018,0.503,0.01,0.748,0.08
C667.979,35.759,668.601,36.873,668.262,37.925z M683.397,41.167c-0.493,0.088-0.979,0.088-1.484,0
c-1.089-0.229-1.665-1.267-1.427-2.479c0.53-1.914,2.312-3.269,4.383-3.332c0.059-0.002,0.115-0.002,0.174,0.002
c1.128,0.065,1.974,0.978,1.906,2.039C686.942,39.041,685.253,40.848,683.397,41.167z M692.414,35.162
c0.108,0.242,0.186,0.492,0.254,0.746c-0.012,0.193-0.037,0.387-0.078,0.576c-0.031,1.332-0.763,1.672-1.91,1.774
c-0.769,0.056-1.56,0-2.273,0c0.033-0.579,0.033-1.159,0-1.739c-0.14-1.371-1.287-2.445-2.737-2.515
c-2.729-0.099-5.24,1.406-6.33,3.793c-0.092,0.324-0.435,0.533-0.781,0.492c-2.779,0-5.553,0-8.337,0h-0.511
c0.063-0.699,0.063-1.399,0-2.099c-0.233-1.229-1.308-2.143-2.62-2.213c-2.728-0.1-5.236,1.396-6.342,3.777
c-0.115,0.342-0.45,0.56-0.834,0.508h-2.593h-0.327c-1.628-0.055-1.748-1.309-1.27-2.297l0.087-0.193h0.492c0.59,0,1.169,0,1.76,0
c0.578-0.008,1.055-0.412,1.15-0.957c0.094-0.612-0.352-1.184-1.001-1.273c-0.218-0.026-0.444-0.041-0.689-0.037H647.06
c-0.265-0.019-0.465-0.108-0.497-0.495c-0.032-0.518,0.343-0.982,0.854-1.093c0.186-0.015,0.39-0.015,0.572,0
c2.834,0,5.653,0,8.501,0c0.465,0.006,0.697-0.035,0.829-0.563c0.132-0.525,0.391-1.036,0.529-1.568
c0.002-0.031,0.007-0.061,0.015-0.09c0.076-0.326,0.401-0.531,0.758-0.455c3.484,0,6.975,0,10.458,0
c0.279,0.006,0.551-0.043,0.805-0.141c0.481-0.215,0.739-0.717,0.635-1.211c-0.102-0.49-0.521-0.859-1.043-0.91
c-0.257-0.016-0.521-0.016-0.779,0h-2.936h-14.313c-0.022,0.002-0.043,0.002-0.058,0.002c-0.242-0.004-0.444-0.205-0.438-0.449
c-0.058-0.477,0.227-0.93,0.697-1.104c0.231-0.061,0.459-0.086,0.717-0.08c2.136,0,4.283,0,6.434,0
c0.011,0.004,0.021,0.004,0.029,0.006c0.389,0.051,0.74-0.207,0.793-0.574c0.15-0.588,0.416-1.121,0.579-1.729
c0.069-0.357,0.252-0.453,0.635-0.453c4.281,0,8.577,0,12.859,0c0.157,0,0.301,0,0.453,0c0.655,0.006,1.202-0.49,1.223-1.115
c0-0.033,0-0.068-0.005-0.102c-0.071-0.613-0.633-1.068-1.275-1.014h-1.319h-16.908h-0.075c-0.007,0-0.014,0-0.021,0
c-0.242,0.006-0.463-0.178-0.471-0.412c-0.11-0.453,0.142-0.918,0.577-1.115c0.244-0.102,0.503-0.148,0.762-0.139h23.92
c1.39,0,1.963,0.756,1.54,2.035c-0.338,0.953-0.652,1.891-0.974,2.836c-0.064,0.17-0.106,0.357-0.183,0.607h3.237
c0.8-0.002,1.534,0.424,1.898,1.101c0.749,1.121,1.622,2.182,2.407,3.285c0.37,0.553,0.961,0.959,1.629,1.141
c0.556,0.156,1.121,0.357,1.692,0.545c0.035,0.01,0.063,0.02,0.099,0.033c0.71,0.233,1.078,0.976,0.832,1.651
c-0.162,0.871-0.359,1.744-0.526,2.617C692.22,34.77,692.303,34.977,692.414,35.162z" />
<polygon points="177.92,41.173 185.154,37.883 181.382,34.25 " />
<path
d="M189.588,0c-16.321,0-29.555,13.431-29.555,30c0,16.568,13.232,30,29.555,30c16.323,0,29.562-13.432,29.562-30
C219.149,13.431,205.911,0,189.588,0z M186.622,39.279l-11.58,4.6l4.878-11.019l11.576-11.071l6.717,6.396L186.622,39.279z
M199.664,26.814l-6.704-6.405l1.327-1.275l6.707,6.414L199.664,26.814z M203.189,23.447l-0.348,0.319l-6.709-6.402l0.354-0.338
c0-0.001,0-0.001,0-0.002c1.26-1.203,3.31-1.201,4.582,0.002l2.121,2.043C204.448,20.273,204.448,22.239,203.189,23.447z" />
<path
d="M349.625,0c-16.321,0-29.555,13.431-29.555,30c0,16.568,13.232,30,29.555,30c16.323,0,29.556-13.432,29.556-30
C379.18,13.431,365.947,0,349.625,0z M345.309,42.794l-4.592-4.393l-8.944-8.552l4.597-4.394l8.939,8.551l17.57-16.8l4.598,4.394
L345.309,42.794z" />
<path
d="M29.555,0C13.232,0,0,13.431,0,30c0,16.568,13.232,30,29.556,30c16.327,0,29.561-13.432,29.561-30
C59.116,13.431,45.883,0,29.555,0z M40.768,45.548c-0.071,0.007-0.148,0.007-0.215,0H18.549c-0.052,0.007-0.107,0.007-0.166,0
c-0.413-0.041-0.704-0.396-0.66-0.786V27.531c-0.012-0.207,0.06-0.41,0.208-0.563c1.087-1.117,1.869-2.467,2.276-3.941
c0.314-1.051,0.475-2.141,0.466-3.236v-3.873c-0.035-0.393,0.273-0.734,0.683-0.768l2.872-0.498
c0.295-0.053,0.583-0.121,0.887-0.188c0.225-0.047,0.456,0.004,0.635,0.141c0.752,0.533,1.604,0.922,2.509,1.152
c0.943,0.238,1.933,0.219,2.861-0.063c0.819-0.234,1.589-0.609,2.273-1.105c0.178-0.125,0.413-0.172,0.629-0.119
c0.311,0.068,0.63,0.141,0.947,0.193c0.925,0.17,1.887,0.328,2.826,0.492c0.381,0.053,0.664,0.375,0.642,0.744
c0,1.377,0,2.752,0,4.127c0.006,1.861,0.511,3.689,1.479,5.305c0.327,0.559,0.73,1.074,1.203,1.539
c0.179,0.164,0.282,0.398,0.276,0.643v17.252h0.001C41.436,45.148,41.165,45.492,40.768,45.548z" />
<path
d="M39.898,27.742c-0.004-0.063-0.029-0.121-0.07-0.17c-0.385-0.404-0.735-0.842-1.039-1.301
c-1.192-1.869-1.824-4.01-1.832-6.193c0-1.166,0-2.328,0-3.492c0-0.09-0.031-0.135-0.126-0.135l-1.088-0.193l-1.03-0.17
c-0.003,0.023-0.003,0.047,0,0.068c0.055,0.555,0.023,1.113-0.088,1.66c-0.235,1.342-0.967,2.559-2.062,3.43
c-1.777,1.43-4.387,1.383-6.114-0.102c-1.436-1.223-2.191-3.018-2.042-4.848c0-0.074,0-0.152,0-0.238l-2.254,0.387v3.334
c0.006,1.182-0.149,2.355-0.478,3.492c-0.44,1.592-1.259,3.061-2.393,4.301c-0.055,0.059-0.082,0.135-0.076,0.213
c0,5.412,0,10.82,0,16.227v0.119h20.699l-0.007-0.023V27.742z M28.976,35.143h-0.001h-5.128c-0.008-0.097-0.008-0.197,0-0.295
v-0.232c-0.007-0.328,0.053-0.656,0.173-0.963c0.114-0.279,0.267-0.547,0.445-0.785c0.194-0.25,0.4-0.478,0.642-0.688l0.691-0.605
l0.5-0.461c0.15-0.145,0.292-0.293,0.413-0.424c0.102-0.127,0.2-0.269,0.273-0.413c0.067-0.133,0.101-0.277,0.101-0.426
c0.025-0.25-0.078-0.492-0.287-0.652c-0.192-0.133-0.438-0.203-0.676-0.195c-0.192-0.002-0.383,0.031-0.565,0.092
c-0.162,0.059-0.329,0.129-0.475,0.211c-0.129,0.072-0.259,0.154-0.368,0.248c-0.082,0.059-0.158,0.127-0.24,0.195l-0.801-1.102
c0.341-0.297,0.728-0.539,1.143-0.715c0.434-0.191,0.916-0.289,1.394-0.289c0.397-0.004,0.788,0.047,1.166,0.152
c0.3,0.082,0.565,0.227,0.808,0.42c0.21,0.178,0.369,0.408,0.462,0.658c0.102,0.281,0.16,0.578,0.152,0.875
c0,0.266-0.064,0.529-0.166,0.774c-0.118,0.252-0.267,0.492-0.431,0.715c-0.194,0.234-0.407,0.455-0.64,0.662
c-0.197,0.211-0.417,0.41-0.627,0.604c-0.123,0.101-0.229,0.214-0.362,0.334c-0.14,0.123-0.255,0.25-0.374,0.375l-0.318,0.358
c-0.068,0.08-0.126,0.173-0.17,0.268h3.265V35.143z M35.442,28.972c-0.294,0.32-0.56,0.662-0.785,1.025
c-0.293,0.467-0.559,0.946-0.786,1.44c-0.271,0.588-0.49,1.197-0.666,1.818c-0.184,0.625-0.305,1.264-0.35,1.91h-1.68
c0.049-0.543,0.142-1.082,0.277-1.613c0.133-0.563,0.296-1.119,0.495-1.668c0.196-0.518,0.425-1.023,0.685-1.52
c0.222-0.422,0.479-0.826,0.77-1.213h-3.344v-1.346h5.383V28.972z" />
<path
d="M27.777,20.343c0.748,0.504,1.693,0.66,2.576,0.422c0.843-0.223,1.572-0.734,2.052-1.434c0.536-0.76,0.827-1.652,0.83-2.57
c0-0.125,0-0.254,0-0.387c-2.262,1.283-5.078,1.283-7.341,0h-0.006c-0.02,0.094-0.026,0.193-0.025,0.289
c0.024,0.383,0.071,0.76,0.139,1.135C26.224,18.835,26.861,19.75,27.777,20.343z" />
</g><!-- black cross along with the use of `clipPath` -->
</svg>
<br>
<br>
<br>
<br>
svg {
border: solid 1px grey;
}
p {
margin-bottom: 1000px;
}
// Get the position on the page of the SVG
var svgLocation = document.getElementById("mysvg").getBoundingClientRect();
// Scroll offset that triggers animation start.
// In this case it is the bottom of the SVG.
var offsetToTriggerAnimation = svgLocation.y + svgLocation.height;
// Function to handle the scroll event.
// Add an event handler to the document for the "onscroll" event
function scrollAnimTriggerCheck(evt)
{
var viewBottom = window.scrollY + window.innerHeight;
if (viewBottom > offsetToTriggerAnimation) {
// Start the SMIL animation
document.getElementById("anim").beginElement();
// Remove the event handler so it doesn't trigger again
document.removeEventListener("scroll", scrollAnimTriggerCheck);
}
}
// Add an event handler to the document for the "onscroll" event
document.addEventListener("scroll", scrollAnimTriggerCheck);