繁体   English   中英

我想在svg动画完成后填充颜色,但不会发生

I want to fill the color after my svg animation completes, but it doesn't happens

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1280px" height="720px" viewBox="0 0 1280 720" enable-background="new 0 0 1280 720" xml:space="preserve"> <defs> <style type="text/css"> .st0{fill:#fff;;stroke:#282828;stroke-width:3;stroke-miterlimit:5;transition: .8s;} .st0 { stroke-dasharray: 2000; stroke-dashoffset:0; -webkit-animation: dash 4s linear forwards; -o-animation: dash 4s linear forwards; -moz-animation: dash 4s linear forwards; animation: dash 4s linear forwards; } .st2{fill:#fff;;stroke:#282828;stroke-width:2;stroke-miterlimit:5;transition: .8s;} .st2 { stroke-dasharray: 2000; stroke-dashoffset:0; -webkit-animation: dash 4s linear forwards; -o-animation: dash 4s linear forwards; -moz-animation: dash 4s linear forwards; animation: dash 4s linear forwards; } .st1{fill:#fff;;stroke:#20b21f;stroke-width:3;stroke-miterlimit:5;transition: .8s;} .st1 { stroke-dasharray: 2000; stroke-dashoffset:0; -webkit-animation: dash 4s linear forwards; -o-animation: dash 4s linear forwards; -moz-animation: dash 4s linear forwards; animation: dash 4s linear forwards; } </style> </defs> <path class="st0" fill="none" stroke="#000000" stroke-miterlimit="10" d="M609.643,318.806l-15.181,18.92 c-11.22-12.1-27.279-19.58-42.899-19.58c-30.801,0-55.001,23.76-55.001,54.12s24.2,54.341,55.001,54.341 c15.399,0,31.24-7.041,42.899-18.261l15.4,17.16c-15.62,15.4-37.84,25.3-59.62,25.3c-45.101,0-80.08-34.1-80.08-78.32 c0-43.78,35.42-77.44,80.96-77.44C572.903,295.046,594.683,304.066,609.643,318.806z"/> <path class="st0" fill="none" stroke="#000000" stroke-miterlimit="10" d="M698.96,449.707l-61.379-154.001h27.94l47.52,125.181l47.961-125.181 h27.06l-62.26,154.001H698.96z"/> <path class="st0" fill="none" stroke="#000000" stroke-miterlimit="10" d="M953.721,318.806l-15.181,18.92 c-11.22-12.1-27.279-19.58-42.899-19.58c-30.801,0-55.001,23.76-55.001,54.12s24.2,54.341,55.001,54.341 c15.399,0,31.24-7.041,42.899-18.261l15.4,17.16c-15.62,15.4-37.84,25.3-59.62,25.3c-45.101,0-80.08-34.1-80.08-78.32 c0-43.78,35.42-77.44,80.96-77.44C916.98,295.046,938.761,304.066,953.721,318.806z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M429.898,540.907v-30.578l-9.982-0.148l0.334-3.488h26.311 l-0.334,3.377l-9.686,0.26v30.578H429.898z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M479.348,540.907v-15.4h-14.695v15.4h-6.605v-34.215h6.605v14.992 h14.695v-14.992h6.643v34.215H479.348z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M520.413,540.907h-19.557v-34.215h18.889l-0.334,3.488l-11.949,0.148 v11.133l11.244,0.148l-0.297,3.154l-10.947,0.26v12.246l13.248,0.26L520.413,540.907z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M558.12,525.062l0.891-0.186c0.865-0.198,1.682-0.451,2.449-0.761 c0.767-0.309,1.429-0.767,1.985-1.373c0.557-0.605,0.995-1.404,1.317-2.394c0.321-0.989,0.482-2.251,0.482-3.785 c0-2.301-0.52-3.977-1.559-5.028c-1.039-1.051-2.4-1.577-4.082-1.577c-0.421,0-0.848,0.013-1.28,0.037 c-0.434,0.024-0.885,0.074-1.354,0.148v30.764h-6.605v-34.029c0.692-0.05,1.447-0.099,2.264-0.148s1.663-0.093,2.542-0.13 c0.878-0.037,1.756-0.062,2.635-0.074c0.878-0.012,1.726-0.019,2.542-0.019c2.004,0,3.741,0.229,5.214,0.687 c1.472,0.458,2.69,1.107,3.655,1.948s1.682,1.862,2.152,3.062c0.47,1.2,0.705,2.555,0.705,4.063c0,1.583-0.26,3.067-0.779,4.453 s-1.317,2.598-2.394,3.637s-2.449,1.855-4.119,2.449s-3.655,0.891-5.956,0.891h-0.297L558.12,525.062z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M604.304,540.907h-19.557v-34.215h18.889l-0.334,3.488l-11.949,0.148 v11.133l11.244,0.148l-0.297,3.154l-10.947,0.26v12.246l13.248,0.26L604.304,540.907z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M626.035,526.806h-2.227v14.102h-6.605v-34.141 c1.336-0.099,2.845-0.186,4.527-0.26c1.682-0.074,3.29-0.111,4.824-0.111c3.934,0,6.921,0.755,8.962,2.264s3.062,3.872,3.062,7.088 c0,1.435-0.174,2.685-0.52,3.748c-0.347,1.063-0.805,1.991-1.373,2.783c-0.569,0.792-1.225,1.46-1.967,2.004 s-1.521,1.002-2.338,1.373c0.965,1.757,1.886,3.414,2.765,4.973c0.878,1.559,1.756,2.919,2.635,4.082 c0.878,1.163,1.769,2.085,2.672,2.765c0.902,0.681,1.874,1.021,2.913,1.021h0.223v2.189c-0.52,0.173-1.12,0.315-1.8,0.427 c-0.681,0.111-1.441,0.167-2.282,0.167c-1.213,0-2.271-0.111-3.173-0.334c-0.903-0.223-1.781-0.705-2.635-1.447 s-1.738-1.831-2.653-3.266c-0.916-1.435-1.979-3.377-3.191-5.826L626.035,526.806z M624.996,523.429c0.915,0,1.8-0.117,2.653-0.353 c0.854-0.234,1.527-0.525,2.022-0.872c0.247-0.173,0.494-0.396,0.742-0.668c0.247-0.272,0.47-0.631,0.668-1.076 c0.197-0.445,0.358-1.015,0.482-1.707c0.123-0.692,0.186-1.559,0.186-2.598c0-1.163-0.13-2.14-0.39-2.932s-0.649-1.429-1.169-1.911 s-1.163-0.828-1.93-1.039c-0.768-0.21-1.646-0.315-2.635-0.315c-0.272,0-0.575,0.007-0.909,0.019 c-0.334,0.013-0.638,0.043-0.909,0.093v13.359H624.996z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M660.752,540.907h-6.605v-34.215h19.186l-0.297,3.451l-12.283,0.186 v12.135l11.875,0.148l-0.297,3.154l-11.578,0.26V540.907z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M705.155,540.907h-19.557v-34.215h18.889l-0.334,3.488l-11.949,0.148 v11.133l11.244,0.148l-0.297,3.154l-10.947,0.26v12.246l13.248,0.26L705.155,540.907z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M731.079,541.39c-2.549,0-4.713-0.433-6.494-1.299 s-3.229-2.078-4.342-3.637s-1.924-3.433-2.431-5.622c-0.508-2.189-0.761-4.62-0.761-7.292c0-2.152,0.247-4.075,0.742-5.771 c0.494-1.694,1.169-3.179,2.022-4.453c0.854-1.273,1.843-2.356,2.969-3.247c1.125-0.891,2.313-1.614,3.563-2.171 c1.249-0.557,2.529-0.959,3.841-1.206c1.311-0.247,2.585-0.371,3.822-0.371c0.767,0,1.577,0.024,2.431,0.074 s1.682,0.118,2.486,0.204c0.804,0.087,1.552,0.186,2.245,0.297c0.692,0.111,1.262,0.217,1.707,0.315l-1.225,4.861 c-0.445-0.148-1.076-0.303-1.893-0.464c-0.816-0.16-1.688-0.315-2.616-0.464s-1.844-0.272-2.746-0.371 c-0.903-0.099-1.651-0.148-2.245-0.148c-0.668,0-1.262,0.019-1.781,0.056s-0.996,0.111-1.429,0.223 c-0.434,0.111-0.842,0.266-1.225,0.464c-0.384,0.198-0.773,0.445-1.169,0.742c-1.015,0.718-1.701,2.078-2.06,4.082 c-0.359,2.004-0.538,4.503-0.538,7.496c0,4.602,0.68,8.084,2.041,10.446c1.36,2.363,3.55,3.544,6.568,3.544 c1.707,0,3.488-0.142,5.344-0.427c1.855-0.284,3.537-0.687,5.047-1.206v2.857c-0.842,0.396-1.751,0.749-2.728,1.058 c-0.978,0.31-1.979,0.569-3.006,0.779c-1.027,0.21-2.066,0.371-3.117,0.482C733.052,541.334,732.044,541.39,731.079,541.39z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M762.568,540.907v-30.578l-9.982-0.148l0.334-3.488h26.311 l-0.334,3.377l-9.686,0.26v30.578H762.568z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M829.072,540.907v-15.4h-14.695v15.4h-6.605v-34.215h6.605v14.992 h14.695v-14.992h6.643v34.215H829.072z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M881.863,523.688c0,2.696-0.341,5.134-1.021,7.311 c-0.681,2.177-1.707,4.039-3.08,5.585c-1.373,1.547-3.087,2.734-5.14,3.563c-2.054,0.828-4.441,1.243-7.162,1.243 c-2.796,0-5.195-0.421-7.199-1.262s-3.644-2.034-4.917-3.581c-1.274-1.546-2.215-3.408-2.82-5.585 c-0.606-2.177-0.909-4.602-0.909-7.273s0.309-5.077,0.928-7.218c0.618-2.14,1.577-3.965,2.876-5.474s2.95-2.665,4.954-3.47 c2.004-0.804,4.379-1.206,7.125-1.206s5.14,0.402,7.181,1.206c2.041,0.805,3.741,1.961,5.103,3.47 c1.36,1.509,2.381,3.334,3.062,5.474C881.522,518.611,881.863,521.017,881.863,523.688z M874.887,523.688 c0-2.078-0.179-3.946-0.537-5.604s-0.919-3.062-1.685-4.212s-1.741-2.028-2.926-2.635c-1.186-0.605-2.593-0.909-4.222-0.909 c-1.433,0-2.767,0.155-4.001,0.464c-1.234,0.31-2.209,0.748-2.925,1.317s-1.241,1.818-1.574,3.748c-0.334,1.93-0.5,4.54-0.5,7.83 c0,2.054,0.147,3.915,0.444,5.585c0.296,1.67,0.79,3.111,1.481,4.323s1.611,2.146,2.759,2.802c1.148,0.656,2.574,0.983,4.278,0.983 c1.753,0,3.197-0.161,4.333-0.482c1.135-0.321,2.098-0.755,2.889-1.299c0.37-0.247,0.691-0.742,0.962-1.484 c0.271-0.742,0.5-1.651,0.686-2.728s0.321-2.275,0.407-3.6C874.843,526.466,874.887,525.099,874.887,523.688z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M929.31,540.907l-2.635-26.088l-11.727,26.088h-2.004l-12.246-26.088 l-2.227,26.088h-3.822l3.303-34.438h6.197l11.393,24.232l10.836-24.232h6.049l3.6,34.438H929.31z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M969.334,540.907h-19.557v-34.215h18.889l-0.334,3.488l-11.949,0.148 v11.133l11.244,0.148l-0.297,3.154l-10.947,0.26v12.246l13.248,0.26L969.334,540.907z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M1001.825,530.888c0,1.237-0.297,2.48-0.891,3.729 c-0.594,1.25-1.447,2.375-2.561,3.377s-2.456,1.818-4.026,2.449c-1.571,0.631-3.334,0.946-5.288,0.946 c-1.039,0-2.004-0.062-2.895-0.186s-1.726-0.291-2.505-0.501s-1.528-0.47-2.245-0.779c-0.718-0.309-1.436-0.649-2.152-1.021 l1.633-5.084c0.47,0.321,1.095,0.668,1.874,1.039s1.626,0.718,2.542,1.039c0.915,0.321,1.837,0.588,2.765,0.798 c0.928,0.211,1.774,0.315,2.542,0.315c0.865,0,1.577-0.056,2.134-0.167s1.058-0.266,1.503-0.464 c0.494-0.198,0.891-0.692,1.188-1.484s0.445-1.818,0.445-3.08c0-1.163-0.384-2.091-1.15-2.783c-0.768-0.692-1.726-1.292-2.876-1.8 c-1.15-0.507-2.394-1.014-3.729-1.521c-1.336-0.507-2.579-1.162-3.729-1.967c-1.15-0.804-2.109-1.837-2.876-3.099 c-0.768-1.262-1.15-2.919-1.15-4.973c0-0.989,0.26-2.034,0.779-3.136c0.52-1.101,1.273-2.115,2.264-3.043 c0.989-0.928,2.214-1.688,3.674-2.282c1.459-0.594,3.117-0.891,4.973-0.891c1.484,0,2.913,0.074,4.286,0.223 s2.702,0.347,3.989,0.594l-1.039,5.084c-0.594-0.223-1.269-0.433-2.022-0.631c-0.755-0.198-1.521-0.371-2.301-0.52 s-1.54-0.266-2.282-0.353c-0.742-0.086-1.398-0.13-1.967-0.13c-0.644,0-1.237,0.031-1.781,0.093 c-0.545,0.063-1.039,0.229-1.484,0.501c-0.421,0.247-0.724,0.675-0.909,1.28c-0.186,0.606-0.278,1.33-0.278,2.171 c0,0.866,0.223,1.583,0.668,2.152s1.032,1.07,1.763,1.503c0.729,0.434,1.559,0.829,2.486,1.188c0.928,0.359,1.88,0.742,2.857,1.15 c0.977,0.408,1.93,0.879,2.857,1.41c0.928,0.532,1.756,1.188,2.486,1.967c0.729,0.779,1.317,1.726,1.763,2.839 S1001.825,529.305,1001.825,530.888z"/> <rect class="st1" x="329" y="40.796" transform="matrix(1 -0.0024 0.0024 1 -0.8765 0.8558)" fill="none" stroke="#000000" stroke-miterlimit="10" width="60.749" height="656.28"/> <rect class="st1" x="233.735" y="139.988" transform="matrix(1 -0.0024 0.0024 1 -0.8092 0.6291)" fill="none" stroke="#000000" stroke-miterlimit="10" width="60.749" height="401.08"/> <rect class="st1" x="135.564" y="240.271" transform="matrix(1 -0.0024 0.0024 1 -1.0524 0.3959)" fill="none" stroke="#000000" stroke-miterlimit="10" width="60.749" height="404.798"/> </svg> 

我想在svg动画完成后填充颜色,但不会发生。

1 个回复

Phhoo花了一些时间:

好的,所以您缺少关键帧动画。 我做了自己的:

@keyframes dash {
    100% {
        stroke-dashoffset: 0;
    }
}

更改了stroke-dashoffset: stroke-dashoffset: 2000; 在所有元素上。

因此,您将得到一条绘制形状并填充颜色的线。 颜色填充发生:

animation: dash 4s linear forwards, fillblack .5s linear 4s forwards;

这是两个动画,第一个是破折号,第二个是fillblack。

现在,第一个数字.5s是动画的持续时间,第二个4s是动画延迟。

这是动画速记的一部分:

  • 动画名称
  • 动画时间
  • 动画定时功能
  • 动画延迟
  • 动画迭代次数
  • 动画方向

♦<^ _ ^>♦

 .st0{ fill:#fff; stroke:#282828; stroke-width:3; stroke-miterlimit:5; transition: .8s; } .st0 { stroke-dasharray: 2000; stroke-dashoffset: 2000; -webkit-animation: dash 4s linear forwards, fillblack .5s linear 4s forwards; -o-animation: dash 4s linear forwards, fillblack .5s linear 4s forwards; -moz-animation: dash 4s linear forwards, fillblack .5s linear 4s forwards; animation: dash 4s linear forwards, fillblack .5s linear 4s forwards; } .st2{fill:#fff;stroke:#282828;stroke-width:2;stroke-miterlimit:5;transition: .8s;} .st2 { stroke-dasharray: 2000; stroke-dashoffset: 2000; -webkit-animation: dash 4s linear forwards, fillblack .5s linear 4s forwards; -o-animation: dash 4s linear forwards, fillblack .5s linear 4s forwards; -moz-animation: dash 4s linear forwards, fillblack .5s linear 4s forwards; animation: dash 4s linear forwards, fillblack .5s linear 4s forwards; } .st1{fill:#fff;stroke:#20b21f;stroke-width:3;stroke-miterlimit:5;transition: .8s;} .st1 { stroke-dasharray: 2000; stroke-dashoffset: 2000; -webkit-animation: dash 4s linear forwards, fillgreen .5s linear 4s forwards; -o-animation: dash 4s linear forwards, fillgreen .5s linear 4s forwards; -moz-animation: dash 4s linear forwards, fillgreen .5s linear 4s forwards; animation: dash 4s linear forwards, fillgreen .5s linear 4s forwards; } @-webkit-keyframes fillblack { 100% { fill: #282828; } } @keyframes fillblack { 100% { fill: #282828; } } @-webkit-keyframes fillgreen { 100% { fill: #20b21f; } } @keyframes fillgreen { 100% { fill: #20b21f; } } @-webkit-keyframes dash { 100% { stroke-dashoffset: 0; } } @keyframes dash { 100% { stroke-dashoffset: 0; } } 
 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1280px" height="720px" viewBox="0 0 1280 720" enable-background="new 0 0 1280 720" xml:space="preserve"> <path class="st0" fill="none" stroke="#000000" stroke-miterlimit="10" d="M609.643,318.806l-15.181,18.92 c-11.22-12.1-27.279-19.58-42.899-19.58c-30.801,0-55.001,23.76-55.001,54.12s24.2,54.341,55.001,54.341 c15.399,0,31.24-7.041,42.899-18.261l15.4,17.16c-15.62,15.4-37.84,25.3-59.62,25.3c-45.101,0-80.08-34.1-80.08-78.32 c0-43.78,35.42-77.44,80.96-77.44C572.903,295.046,594.683,304.066,609.643,318.806z"/> <path class="st0" fill="none" stroke="#000000" stroke-miterlimit="10" d="M698.96,449.707l-61.379-154.001h27.94l47.52,125.181l47.961-125.181 h27.06l-62.26,154.001H698.96z"/> <path class="st0" fill="none" stroke="#000000" stroke-miterlimit="10" d="M953.721,318.806l-15.181,18.92 c-11.22-12.1-27.279-19.58-42.899-19.58c-30.801,0-55.001,23.76-55.001,54.12s24.2,54.341,55.001,54.341 c15.399,0,31.24-7.041,42.899-18.261l15.4,17.16c-15.62,15.4-37.84,25.3-59.62,25.3c-45.101,0-80.08-34.1-80.08-78.32 c0-43.78,35.42-77.44,80.96-77.44C916.98,295.046,938.761,304.066,953.721,318.806z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M429.898,540.907v-30.578l-9.982-0.148l0.334-3.488h26.311 l-0.334,3.377l-9.686,0.26v30.578H429.898z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M479.348,540.907v-15.4h-14.695v15.4h-6.605v-34.215h6.605v14.992 h14.695v-14.992h6.643v34.215H479.348z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M520.413,540.907h-19.557v-34.215h18.889l-0.334,3.488l-11.949,0.148 v11.133l11.244,0.148l-0.297,3.154l-10.947,0.26v12.246l13.248,0.26L520.413,540.907z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M558.12,525.062l0.891-0.186c0.865-0.198,1.682-0.451,2.449-0.761 c0.767-0.309,1.429-0.767,1.985-1.373c0.557-0.605,0.995-1.404,1.317-2.394c0.321-0.989,0.482-2.251,0.482-3.785 c0-2.301-0.52-3.977-1.559-5.028c-1.039-1.051-2.4-1.577-4.082-1.577c-0.421,0-0.848,0.013-1.28,0.037 c-0.434,0.024-0.885,0.074-1.354,0.148v30.764h-6.605v-34.029c0.692-0.05,1.447-0.099,2.264-0.148s1.663-0.093,2.542-0.13 c0.878-0.037,1.756-0.062,2.635-0.074c0.878-0.012,1.726-0.019,2.542-0.019c2.004,0,3.741,0.229,5.214,0.687 c1.472,0.458,2.69,1.107,3.655,1.948s1.682,1.862,2.152,3.062c0.47,1.2,0.705,2.555,0.705,4.063c0,1.583-0.26,3.067-0.779,4.453 s-1.317,2.598-2.394,3.637s-2.449,1.855-4.119,2.449s-3.655,0.891-5.956,0.891h-0.297L558.12,525.062z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M604.304,540.907h-19.557v-34.215h18.889l-0.334,3.488l-11.949,0.148 v11.133l11.244,0.148l-0.297,3.154l-10.947,0.26v12.246l13.248,0.26L604.304,540.907z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M626.035,526.806h-2.227v14.102h-6.605v-34.141 c1.336-0.099,2.845-0.186,4.527-0.26c1.682-0.074,3.29-0.111,4.824-0.111c3.934,0,6.921,0.755,8.962,2.264s3.062,3.872,3.062,7.088 c0,1.435-0.174,2.685-0.52,3.748c-0.347,1.063-0.805,1.991-1.373,2.783c-0.569,0.792-1.225,1.46-1.967,2.004 s-1.521,1.002-2.338,1.373c0.965,1.757,1.886,3.414,2.765,4.973c0.878,1.559,1.756,2.919,2.635,4.082 c0.878,1.163,1.769,2.085,2.672,2.765c0.902,0.681,1.874,1.021,2.913,1.021h0.223v2.189c-0.52,0.173-1.12,0.315-1.8,0.427 c-0.681,0.111-1.441,0.167-2.282,0.167c-1.213,0-2.271-0.111-3.173-0.334c-0.903-0.223-1.781-0.705-2.635-1.447 s-1.738-1.831-2.653-3.266c-0.916-1.435-1.979-3.377-3.191-5.826L626.035,526.806z M624.996,523.429c0.915,0,1.8-0.117,2.653-0.353 c0.854-0.234,1.527-0.525,2.022-0.872c0.247-0.173,0.494-0.396,0.742-0.668c0.247-0.272,0.47-0.631,0.668-1.076 c0.197-0.445,0.358-1.015,0.482-1.707c0.123-0.692,0.186-1.559,0.186-2.598c0-1.163-0.13-2.14-0.39-2.932s-0.649-1.429-1.169-1.911 s-1.163-0.828-1.93-1.039c-0.768-0.21-1.646-0.315-2.635-0.315c-0.272,0-0.575,0.007-0.909,0.019 c-0.334,0.013-0.638,0.043-0.909,0.093v13.359H624.996z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M660.752,540.907h-6.605v-34.215h19.186l-0.297,3.451l-12.283,0.186 v12.135l11.875,0.148l-0.297,3.154l-11.578,0.26V540.907z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M705.155,540.907h-19.557v-34.215h18.889l-0.334,3.488l-11.949,0.148 v11.133l11.244,0.148l-0.297,3.154l-10.947,0.26v12.246l13.248,0.26L705.155,540.907z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M731.079,541.39c-2.549,0-4.713-0.433-6.494-1.299 s-3.229-2.078-4.342-3.637s-1.924-3.433-2.431-5.622c-0.508-2.189-0.761-4.62-0.761-7.292c0-2.152,0.247-4.075,0.742-5.771 c0.494-1.694,1.169-3.179,2.022-4.453c0.854-1.273,1.843-2.356,2.969-3.247c1.125-0.891,2.313-1.614,3.563-2.171 c1.249-0.557,2.529-0.959,3.841-1.206c1.311-0.247,2.585-0.371,3.822-0.371c0.767,0,1.577,0.024,2.431,0.074 s1.682,0.118,2.486,0.204c0.804,0.087,1.552,0.186,2.245,0.297c0.692,0.111,1.262,0.217,1.707,0.315l-1.225,4.861 c-0.445-0.148-1.076-0.303-1.893-0.464c-0.816-0.16-1.688-0.315-2.616-0.464s-1.844-0.272-2.746-0.371 c-0.903-0.099-1.651-0.148-2.245-0.148c-0.668,0-1.262,0.019-1.781,0.056s-0.996,0.111-1.429,0.223 c-0.434,0.111-0.842,0.266-1.225,0.464c-0.384,0.198-0.773,0.445-1.169,0.742c-1.015,0.718-1.701,2.078-2.06,4.082 c-0.359,2.004-0.538,4.503-0.538,7.496c0,4.602,0.68,8.084,2.041,10.446c1.36,2.363,3.55,3.544,6.568,3.544 c1.707,0,3.488-0.142,5.344-0.427c1.855-0.284,3.537-0.687,5.047-1.206v2.857c-0.842,0.396-1.751,0.749-2.728,1.058 c-0.978,0.31-1.979,0.569-3.006,0.779c-1.027,0.21-2.066,0.371-3.117,0.482C733.052,541.334,732.044,541.39,731.079,541.39z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M762.568,540.907v-30.578l-9.982-0.148l0.334-3.488h26.311 l-0.334,3.377l-9.686,0.26v30.578H762.568z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M829.072,540.907v-15.4h-14.695v15.4h-6.605v-34.215h6.605v14.992 h14.695v-14.992h6.643v34.215H829.072z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M881.863,523.688c0,2.696-0.341,5.134-1.021,7.311 c-0.681,2.177-1.707,4.039-3.08,5.585c-1.373,1.547-3.087,2.734-5.14,3.563c-2.054,0.828-4.441,1.243-7.162,1.243 c-2.796,0-5.195-0.421-7.199-1.262s-3.644-2.034-4.917-3.581c-1.274-1.546-2.215-3.408-2.82-5.585 c-0.606-2.177-0.909-4.602-0.909-7.273s0.309-5.077,0.928-7.218c0.618-2.14,1.577-3.965,2.876-5.474s2.95-2.665,4.954-3.47 c2.004-0.804,4.379-1.206,7.125-1.206s5.14,0.402,7.181,1.206c2.041,0.805,3.741,1.961,5.103,3.47 c1.36,1.509,2.381,3.334,3.062,5.474C881.522,518.611,881.863,521.017,881.863,523.688z M874.887,523.688 c0-2.078-0.179-3.946-0.537-5.604s-0.919-3.062-1.685-4.212s-1.741-2.028-2.926-2.635c-1.186-0.605-2.593-0.909-4.222-0.909 c-1.433,0-2.767,0.155-4.001,0.464c-1.234,0.31-2.209,0.748-2.925,1.317s-1.241,1.818-1.574,3.748c-0.334,1.93-0.5,4.54-0.5,7.83 c0,2.054,0.147,3.915,0.444,5.585c0.296,1.67,0.79,3.111,1.481,4.323s1.611,2.146,2.759,2.802c1.148,0.656,2.574,0.983,4.278,0.983 c1.753,0,3.197-0.161,4.333-0.482c1.135-0.321,2.098-0.755,2.889-1.299c0.37-0.247,0.691-0.742,0.962-1.484 c0.271-0.742,0.5-1.651,0.686-2.728s0.321-2.275,0.407-3.6C874.843,526.466,874.887,525.099,874.887,523.688z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M929.31,540.907l-2.635-26.088l-11.727,26.088h-2.004l-12.246-26.088 l-2.227,26.088h-3.822l3.303-34.438h6.197l11.393,24.232l10.836-24.232h6.049l3.6,34.438H929.31z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M969.334,540.907h-19.557v-34.215h18.889l-0.334,3.488l-11.949,0.148 v11.133l11.244,0.148l-0.297,3.154l-10.947,0.26v12.246l13.248,0.26L969.334,540.907z"/> <path class="st2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M1001.825,530.888c0,1.237-0.297,2.48-0.891,3.729 c-0.594,1.25-1.447,2.375-2.561,3.377s-2.456,1.818-4.026,2.449c-1.571,0.631-3.334,0.946-5.288,0.946 c-1.039,0-2.004-0.062-2.895-0.186s-1.726-0.291-2.505-0.501s-1.528-0.47-2.245-0.779c-0.718-0.309-1.436-0.649-2.152-1.021 l1.633-5.084c0.47,0.321,1.095,0.668,1.874,1.039s1.626,0.718,2.542,1.039c0.915,0.321,1.837,0.588,2.765,0.798 c0.928,0.211,1.774,0.315,2.542,0.315c0.865,0,1.577-0.056,2.134-0.167s1.058-0.266,1.503-0.464 c0.494-0.198,0.891-0.692,1.188-1.484s0.445-1.818,0.445-3.08c0-1.163-0.384-2.091-1.15-2.783c-0.768-0.692-1.726-1.292-2.876-1.8 c-1.15-0.507-2.394-1.014-3.729-1.521c-1.336-0.507-2.579-1.162-3.729-1.967c-1.15-0.804-2.109-1.837-2.876-3.099 c-0.768-1.262-1.15-2.919-1.15-4.973c0-0.989,0.26-2.034,0.779-3.136c0.52-1.101,1.273-2.115,2.264-3.043 c0.989-0.928,2.214-1.688,3.674-2.282c1.459-0.594,3.117-0.891,4.973-0.891c1.484,0,2.913,0.074,4.286,0.223 s2.702,0.347,3.989,0.594l-1.039,5.084c-0.594-0.223-1.269-0.433-2.022-0.631c-0.755-0.198-1.521-0.371-2.301-0.52 s-1.54-0.266-2.282-0.353c-0.742-0.086-1.398-0.13-1.967-0.13c-0.644,0-1.237,0.031-1.781,0.093 c-0.545,0.063-1.039,0.229-1.484,0.501c-0.421,0.247-0.724,0.675-0.909,1.28c-0.186,0.606-0.278,1.33-0.278,2.171 c0,0.866,0.223,1.583,0.668,2.152s1.032,1.07,1.763,1.503c0.729,0.434,1.559,0.829,2.486,1.188c0.928,0.359,1.88,0.742,2.857,1.15 c0.977,0.408,1.93,0.879,2.857,1.41c0.928,0.532,1.756,1.188,2.486,1.967c0.729,0.779,1.317,1.726,1.763,2.839 S1001.825,529.305,1001.825,530.888z"/> <rect class="st1" x="329" y="40.796" transform="matrix(1 -0.0024 0.0024 1 -0.8765 0.8558)" fill="none" stroke="#000000" stroke-miterlimit="10" width="60.749" height="656.28"/> <rect class="st1" x="233.735" y="139.988" transform="matrix(1 -0.0024 0.0024 1 -0.8092 0.6291)" fill="none" stroke="#000000" stroke-miterlimit="10" width="60.749" height="401.08"/> <rect class="st1" x="135.564" y="240.271" transform="matrix(1 -0.0024 0.0024 1 -1.0524 0.3959)" fill="none" stroke="#000000" stroke-miterlimit="10" width="60.749" height="404.798"/> </svg> 

1 动画结束后,SVG不会填充

我的名字叫DanielGötz,我目前正在我的投资组合网站上工作,但我遇到了问题。 我的SVG动画结束后不会填充。 我的网站: http : //20162.hosts.ma-cloud.nl/portfoliowebsite/ 如果向下滚动到名为“ Mijn技能”的H1,则可以看 ...

2 SVG 图案不会改变填充颜色

我正在使用 Vue.js 并且我正在创建使用形状图案作为背景的 SVG。 图案工作正常,但是每当我尝试通过传递道具动态更改图案填充的颜色时,它都不起作用。 我确信我传递的道具是正确的,因为我在其他地方使用它。 &lt;pattern id="TrianglePattern" patt ...

3 我想在我的 SVG 上反转动画的方向

我有这个 codepen 动画: Codepen SVG 测试 和我的 HTML: 动画从左上角开始到底部(向前)。 我希望它从相同的左上角开始,但是向右移动,即波浪所在的方向,然后移动到右下角,然后是左下角,然后是左上角并完成。 我试过 animation-direction: rev ...

5 如果我想要填充颜色而不是svg中的笔划怎么办

我在youtube上观看了一个视频教程,该视频教程为svg设置了动画,并按照它的所有方法进行了很好的工作。但是,我需要设置动画的图像没有描边,而是有填充感。 有人可以帮我怎么做吗? 这是我用于笔画的代码。 ...

6 SVG填充动画在Firefox和Edge上不起作用

我有一个简单的动画,其中SVG悬停在鼠标上方。 在Chrome上运行正常,但我发现在Firefox或Edge上无法正常运行。 我尝试了几种不同的方法,但似乎无济于事。 我是SVG的新手,我想我缺少什么吗? 什么是实现我要完成的正确方法? 这是代码: svg#bogeLo ...

10 SVG动画文本填充颜色问题

我已经按照自己的意愿制作了动画。 但是现在我有一个问题,那就是在动画绘制单词时如何用黑色填充它们。 我希望你能理解我的意思。 现在,它正在显示类似http://progsofts.c​​om/animate.html的内容,但是我希望在对其进行动画处理时,它应该用黑色填充文本字母。 如果 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM